I have this array of objects that i display on the UI table. It has 3 columns with name, contact and id.
[Object, Object, Object]
0:Object
name: "Rick"
Contact: "Yes"
id: 1
1:Object
name:"Anjie"
Contact:"No"
id: 2
2:Object
name:"dillan"
Contact:"Maybe"
id:3
Now, i add a new row to the top of table. So the newly added row into the array of objects, would look like this.
[Object, Object, Object,Object]
0:Object //newly added row. Since new row is added, it doesnt have any data.
name: ""
Contact: ""
id:
1:Object
name: "Rick"
Contact: "Yes"
id: 1
2:Object
name:"Anjie"
Contact:"No"
id: 2
3:Object
name:"dillan"
Contact:"Maybe"
id:3
I want the array of objects to look like this instead of above one.
[Object, Object, Object,Object]
0:Object //newly added row. Since new row is added, it doesnt have any data.
name: ""
Contact: ""
id: 4
1:Object
name: "Rick"
Contact: "Yes"
id: 1
2:Object
name:"Anjie"
Contact:"No"
id: 2
3:Object
name:"dillan"
Contact:"Maybe"
id:3
The only change is id value at 0th object. You can see i entered it as 4. It will check the max value in array of objects for id. In this case, it is 3. So it will increment by 1 and put it as the id value for newly added row.
Can someone let me know how to achieve this please.
Also, I had one more query.
If my id values are as follows.
1
2
3
4
5
6
And i delete 4 and 5. So new rows will be
1
2
5
6
Here, it will check max length as 4 and add id value of 5 to newly row. it will look somewhat like this.
5
1
2
5
6
In this case, 5 is repeated. I dont want this. I instead would like to see which is the highest value given to id, and then increment the id according to it. So it should look like this.
7
1
2
5
6
If I understand you correctly, you simply want to run:
array[0].id = array.length;
immediately after adding the row. Alternatively, if you can control the values of the object representing the new row when it is added, you could add the row as:
{
name:"",
Contact:"",
id: array.length + 1
}
EDIT:
In response to your edit, showing that rows of the array can be deleted.
In that case, to get the ID value, you have a number of options.
One is to go through all members of the array at time of deletion, and reduce the id of all rows which have an id greater than the deleted row. This is probably the best solution.
Example code:
var delete = function(array, idToDelete) {
for(var i = 0; i < array.length; i += 1) {
if(array[i].id === idToDelete) {
array.splice(i, 1);
} else if (array[i].id > idToDelete) {
array[i].id = array[i].id - 1;
}
}
}
If, for whatever reason, this is not an option, I would reccommend iterating through the array to find the highest ID in it, and adding 1.
var newId = array[0].id;
for(var i = 0; i < array.length; i += 1) {
if(array[i].id > newId) {
newId = array[i].id;
}
}
array.splice(0, 0, {name:"", Contact:"", id: newId + 1});
You can use this to find the next highest ID available (assuming that it's not trivially always equal to the length of the array):
var newID = 1 + myArray.reduce(function(p, c) {
return Math.max(c.id, p);
}, 0);
where myArray is your array.
In ES6 you could use:
var newID = 1 + myArray.reduce((p, c) => Math.max(c.id, p), 0)
If you only care about the ID being unique, you can add the timestamp as the ID
Lets assume that your array is called peopleContact
your code to add the item in the array of objects would look something like the following.
var person= new Object();
person.name= "";
person.Contact= "";
person.id = Date.now();
peopleContact.push(person);
Related
I have a URL with some parameters like this one:
http://localhost:9000/#/checkout/?title1=Sodadrink&quantity1=2&price1=129.95&title2=PolaryteGlasses&quantity2=1&price2=59.95#%2F
and I'm getting them with $location.search(), which returns them just fine in an Object like:
Object
price1: "129.95"
price2: "59.95"
quantity1: "2"
quantity2: "1"
title1: "Sodastream"
title2: "Polaryte – Óculos de Sol"
__proto__: Object
This is cool, but now I need to group each item like:
[item]
title : Sodastream
price : 129.95
quantity : 1
[item]
title : ---
price : ---
quantity : ---
I'm stuck in this part, I've though of counting the total items inside the object, 6, and them group them in groups of 3 by creating a new Object, but didn't work out.
Can you help me? Thanks.
Since the number of items in the URL may vary, it is best to not hardcode any number. For this, I am also assuming that every item has 3 properties - title, price and quantity.
Try this:
var numOfItems = Object.keys(input).length/3; // for example, 6 properties will mean 2 items
var output = [];
for (var i = 1; i <= numOfItems; i++) {
if (input["title"+i]) {
output.push({title: input["title"+i], price: input["price"+i],quantity: input["quantity"+i]})
}
}
The output array should contain the objects in the exact way you specified.
You will have to write a bit of javascript to do that.
Assuming that your object from above is called inputs
const MAX_ITEMS=9;
var outputs = [];
for (var i=1,i<MAX_ITEMS;i++) {
if (inputs["item"+i]) {
outputs.push({item: inputs["item"+i], price: inputs["price"+i],quantity: inputs["quantity"+i]})
}
}
Your data will be in the outputs variable
so i'm sitting here for hours and now i have to get the Eyes of the Internet to help me out...
So i'm trying to create a Shift Plan. I created a Table (each cell a jQuery Dropdown button with the possible Shifts). on every selection i write the selected Shifts into an array.
The following code snippet is how i do that. I need this in the on click because it will show the total shift time in n extra field.
Later i want save the arrays to a Database an because of that i need to access the calFirstRow array for each employee.
var calFirstRow = [,];
$(document).ready(function(){
$('.dropdown-menu a').on('click', function(){
// Do the following stuff for every Employee
$.each( jqEmployees, function(index, value){
var name = value['NAME'];
// create array from first row
$( ".first-row-"+ name +" td button" ).each(function( index ) {
calFirstRow[name, index] = $( this ).text();
});
});//End each Employee
});//End Dropdown click
Here i try to Access the array
});//End ready
the problem is, no matter what i do, in every calFirstRow[name] i get the array from the last Employee.
If i print the Array i get something like [User1: Array, User2: Array] but in each, User1 and 2 is the data of User2 saved...
Im new to jQuery and i maybe miss somethin really fundamental....
It looks like you're trying to treat calFirstRow as a two dimensional array, but the way you're accessing it doesn't make any sense. If you pop open your browser's development console and type [,], you'll see this:
> [,]
< [undefined × 1]
It's got only a single dimension, and JavaScript treats the comma as coming after an element, which you haven't provided, so you have an array containing a single undefined.
The next problem happens when you access calFirstRow[name, index]. Arrays can only be accessed by a single integer index, and JavaScript doesn't know what to do with name, so it ignores it and just uses index:
> a = ['a', 'b', 'c']
> a[1, 2]
< 'c' // The element at index 2
> a[2, 0]
< 'a' // The element at index 0
The result is that your loops aren't creating a two dimensional array that matches your table, they're just overwriting calFirstRow again and again, which is why your last user's data ends up in it. It looks like it's in every row, but really when you access calFirstRow['User1', 0] or calFirstRow['User2', 0], you're just accessing calFirstRow[0] twice.
Since you're trying to index by the employee's name, and then their column in the table, I think you want to start with an object. calFirstRow doesn't seem like the name for what you really want, so let's call it shiftData:
var shiftData = {}
The keys in the object will be your employees' names, and the values will be their array of shifts. For example:
> shiftData['Kristjan'] = [1,2,3]
< [1, 2, 3]
> shiftData['Joel'] = [4,5,6]
< [4, 5, 6]
> shiftData
< Object {Kristjan: Array[3], Joel: Array[3]}
Joel: Array[3]
0: 4
1: 5
2: 6
length: 3
Kristjan: Array[3]
0: 1
1: 2
2: 3
length: 3
In your click handler, you can map over each employee's row in the table and set their named entry to the result.
$.each( jqEmployees, function(employeeIndex, value){
var name = value['NAME'];
shiftData[name] = $( ".first-row-"+ name +" td button" ).map(function( columnIndex ) {
return $( this ).text();
});
});
This will result in a shiftData object like I showed in the console above. Each iteration of map returns the text of the td button in the user's row and column. Those values are aggregated into an array and assigned to shiftData[name].
I have a list with an observer function on it :
var names = ['joe', 'bob', 'loic'];
Object.observe(names, function(changes){
changes.forEach(function(change) {
console.log(change.type, change.name)
});
console.log("names",names);
});
console.log("######## del bob");
names.splice(1,1);// output is "update 1 - delete 2", why?
console.log("names", names) // but "bob" is the one deleted in the list
The deleted index according to the change object is 2, but I'm deleted the index 1, and the list has actually the index 1 deleted. Do you know why?
Is it because index 1 is updated to get index 2 value and index 2 is deleted?
Is there a way to get the actual deleted element index?
You can capture a splice event at the right index with Array.observe :
var names = ['joe', 'bob', 'loic'];
Array.observe(names, function(changes){
changes.forEach(function(change) {
console.log(change.type, change.name);
});
});
Thanks #xavier-delamotte :)
I am very new with Javascript and I can't seem to find an explanation for what is happening with my code.
I want to create an array of "people" where each person has some information associated with them, like "id" and "name". I don't know how many "people" I would need in my array so I am using "push" when I need another person. My problem is my array ends up filled with the last person's information.
Here is my declarations that I am using:
var ppl_arr = [];
var profile = {
id: 10000,
name: " ",
};
profile.id=3;
ppl_arr.push(profile); //add this person to my array
alert(ppl_arr[0].id + "\t" + ppl_arr.length);
profile.id=5;
ppl_arr.push(profile); // push next person to the array
alert(ppl_arr[0].id+"\t"+ppl_arr[1].id + "\t"+ppl_arr.length);
The first alert displays correctly : "3 1"
In the second alert, I get " 5 5 2" instead of " 3 5 2"
So I get two entries into my array but the second one seems to overwrite the first one. Can anyone explain what is happening?
You are simply changing the id of the same object, and adding the same object to the array twice. I would suggest that you create your 'people' objects as instance objects, something like this
//This is a constructor function for a Person object
function Person(id,name)
{
this.Id = id;
this.Name = name;
}
then
var ppl_arr = [];
ppl_arr.push(new Person(3,"Bob")); //add this person to my array
alert(ppl_arr[0].Id + " - " + ppl_arr.length); //outputs "3 - 1"
//NOTE put a string inbetween, because Id and length are both integers,
//you would actual get a sum of the two, not a string concatenation.
ppl_arr.push(new Person(5,"Steve")); // push next person to the array
alert(ppl_arr[0].Id+"\t"+ppl_arr[1].Id + "\t"+ppl_arr.length); // outputs 3 5 2
Question #1:
alert(ppl_arr[0].id + ppl_arr.length); will display the sum, not the concatenation - try alert(ppl_arr[0].id.toString().concat(ppl_arr.length));
Question #2:
You change the id property of an existing object, not copy it. So you change the id of the object already in the array as well. So you would need to
var ppl_arr = [];
var profile = {
id: 10000,
name: " ",
};
profile.id=3;
ppl_arr.push(profile);
//Create a new profile
var profile2 = {
id: 10000,
name: " ",
};
profile2.id=5;
ppl_arr.push(profile2);
I have a list of JS objects defined by an integer ID.
objects = [{
id: 0,
type: 'null'
}, {
id: 1,
type: 'foo'
}, {
id: 2,
type: 'bar'
}];
I implemented a function to remove an element from my list :
removeObject = function(o){
objects.splice(objects.indexOf(o), 1);
}
My problem is that I need to create a function to add a new item in my list with a id not already used (for example the lower positive integer not present in the list).
I tried to do something like that but it did not work when I remove the object 0 (for example).
addObject = function(type){
objects.push({
id: objects.length,
type: type
});
};
How can I do this ?
EDIT 1
According to your answers, I assume that the best solution in term of performance is to just use a topId which is always incremented when I add a new object in my list.
But that do not answer to my requierement. Actually I think that #X-Pippes response could be good.
Should I do someting like that :
objects = [{
id: 0,
type: 'null'
}, {
id: 1,
type: 'foo'
}, {
id: 2,
type: 'bar'
}];
// Init available ids list with the default value
availableIds = [objects.length];
removeObject = function(o){
// Remove the object from the list
objects.splice(objects.indexOf(o), 1);
// Add its id to the available ids list
availableIds.push(o.id);
}
addObject = function(type){
// Get lower id available
var newId = Math.min.apply(Math,availableIds);
// Push the new object with the id retrieved
objects.push({
id: newId,
type: type
});
// Remove used id from the available ids list
availableIds.splice(availableIds.indexOf(newId), 1);
// Add a default id if available list is empty
if(availableIds.length < 1) availableIds.push(objects.length);
};
if you remove for instance 0 and the next addObject is 0 you have to do something like:
keep a list [initial empty] with every ID removed. When you need to add a new one, pick the shorter, add and delete from list.
Also keep a var with the biggest ID added. If the previous list is empty, add +1 to the var and addObject with that id
Use the correct structures. A JavaScript object will do the job. It guarantees that you only get one item for key, you can look up and remove by key in probably O(1)ish. No point trying to re-implement it in a less efficient manner, which will be O(n) lookup.
var structure = {
objects : {},
topId : 0
}
structure.add = function(item) {
var id = this.topId ++;
structure.objects[id] = item;
}
structure.add("thing")
structure.add("other thing")
structure.add("another thing")
structure.objects
>>> Object {0: "thing", 1: "other thing", 2: "another thing"}
structure.objects[1]
>> "other thing"
Then the normal index operations to get/set/delete.
If you use that function then you have an invariant (guarantee) on your data structure that you won't use the same ID twice.
You need a function to find the first free number:
addObject = function(type){
objects.push({
id: firstOpenIndex(),
type: type
});
};
firstOpenIndex = function() {
for(var idx = 0; true; i++) {
var found = false;
for(var o in objects) {
if (objects[o].id == idx) {
found = true;
break;
}
}
if (!found) return idx;
}
}
In Javascript MaxInt is 9007199254740992. Why not just keep incrementing?
You can and probably should just use an array(s) like:
objects.type=['null','foo','bar'];
to add an object see:
How to append something to an array?
to find a value: var index = objects.type.indexOf('foo');
to find 1st empty field var index = objects.type.indexOf(''); which you can use to find the element for adding (if index is -1 use objects.type.length) if you "delete" an element by setting it to "" or... unless you have specific reason for keeping the "ID" static (in this case the array index), remove the element and only append new ones to the end
to remove an element see:
How do I remove a particular element from an array in JavaScript?
which will allow you to just push/append the next data.
if you need a new object array with empty fields to fill because you get new data to track:
object.newField=new Array(objects.type.length);
If you get to this point where your object contains multiple arrays, you will probably want to create functions for insert/add and delete/remove, so you don't do an operation on 1 and not the other.
Everything is already built in (read likely already pretty fast) and you don't need to reinvent constructors for your really cool object type.