34

I have an array as : 

items=[{'id':1},{'id':2},{'id':3},{'id':4}];

How should I add a new pair {'id':5} to the array?

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
exAres
  • 4,806
  • 16
  • 53
  • 95
  • Thanks @NDM for comment. I tried some code on jsfiddle and it is working (with items.push({'id':5})....) But when I use the same code, the browser shows {{item.id}} instead of showing the updated value of items (I am using angularjs btw). I don't know why is this happening. – exAres Sep 23 '13 at 08:33
  • possible duplicate of [Add new value to an existing array in JavaScript](http://stackoverflow.com/questions/1996747/add-new-value-to-an-existing-array-in-javascript) – chryss Sep 23 '13 at 16:12
  • The OP is creating an array of objects, not an array of values. – Marc Audet Sep 23 '13 at 16:23
  • Possible duplicate of [Appending to array](http://stackoverflow.com/questions/351409/appending-to-array) – adeady Dec 15 '15 at 15:32

5 Answers5

62

Use .push:

items.push({'id':5});
CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
12

.push() will add elements to the end of an array.

Use .unshift() if need to add some element to the beginning of array i.e:

items.unshift({'id':5});

Demo:

items = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];
items.unshift({'id': 0});
console.log(items);

And use .splice() in case you want to add object at a particular index i.e:

items.splice(2, 0, {'id':5});
           // ^ Given object will be placed at index 2...

Demo:

items = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];
items.splice(2, 0, {'id': 2.5});
console.log(items);
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
7

Sometimes .concat() is better than .push() since .concat() returns the new array whereas .push() returns the length of the array.

Therefore, if you are setting a variable equal to the result, use .concat().

items = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];
newArray = items.push({'id':5})

In this case, newArray will return 5 (the length of the array).

newArray = items.concat({'id': 5})

However, here newArray will return [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}, {'id': 5}].

Natorious
  • 81
  • 1
  • 3
2

If you're doing jQuery, and you've got a serializeArray thing going on concerning your form data, such as : 

var postData = $('#yourform').serializeArray();

// postData (array with objects) : 
// [{name: "firstname", value: "John"}, {name: "lastname", value: "Doe"}, etc]

...and you need to add a key/value to this array with the same structure, for instance when posting to a PHP ajax request then this : 

postData.push({"name": "phone", "value": "1234-123456"});

Result:

// postData : 
// [{name: "firstname", value: "John"}, {name: "lastname", value: "Doe"}, {"name":"phone","value":"1234-123456"}]
anoraq
  • 515
  • 7
  • 9
2

New solution with ES6

Default object

object = [{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}];

Another object

object =  {'id': 5};

Object assign ES6

resultObject = {...obj, ...newobj};

Result

[{'id': 1}, {'id': 2}, {'id': 3}, {'id': 4}, {'id': 5}];
Ugur
  • 750
  • 9
  • 20