how to add properties to array of objects in angularjs

Question

I have an array of objects as follows:

var array = [{'content1': 'abc', 'id1':'100'},{'content2': 'xyz', id2':'200'}...];

Now I want to add new elements(I don't know if I can, but not manually ) to each of these objects and I want the same array to be as follows:

var array = [{'content1': 'abc', 'id1':'100', 'name': 'foo'},{'content2': 'xyz', 'id2':'200', 'name': 'bar'}...];

Can someone please help me to do this?

Answer 1

You can use angular merge

   var array = [{
    'content1': 'abc',
    'id1': '100'
  }, {
    'content2': 'xyz',
    'id2': '200'
  }];

  var array2 = [{
     'name': 'foo'
  }, {
     'name': 'bar'
  }];

  var object = angular.merge({}, array, array2)

and the result will be all properties merged:

var array2 = [{
    'content1': 'abc',
    'id1': '100',
    'name': 'foo'
  }, {
    'content2': 'xyz',
    'id2': '200',
    'name': 'bar'
  }];

Take a look at this plunker:

http://plnkr.co/edit/X7Zv99qNXSkmHh4lIBMP

Answer 2

You can't use push to set property. push can use to add array element. If you want to use

$scope.object.array1.push(value);

then value should be an object like

var value = {content1: 'xyz',id:'4'};

To add property you can follow bellow process.

Say your object like:

$scope.object={
     array1: [{content1: 'abc', id1:'100'},
       {content2: 'xyz', id2:'200'}],
     array2: [{content1: 'abc', id1:'100'},
     {content2: 'xyz', id2:'200'}]
    };

and if you want to add property name for each object of array1. you can use forEach to add new property and value. say called a function addProperty to add property and value.

$scope.addProperty = function(){
  var i =0;
  angular.forEach($scope.object.array1, function(eachObj) {
    i+=1;
    eachObj.name ='foo'+i;
  });
};

then out put of array1 will be

[{"content1":"abc","id1":"100","name":"foo1"},{"content2":"xyz","id2":"200","name":"foo2"}]

PLUNKER DEMO

Answer 3

The easiest way it is using .map();

array.map(function(element) {
    return element.name = insertedName;
});

You can use a function which will send insertedName .

Answer 4

There are several ways to skin this. Just depends how dynamic you need it to be.

Here is a basic example showing how it can be done by accessing your objects by index:

var array = [{'content1': 'abc', 'id1':'100'},{'content2': 'xyz', 'id2':'200'}];

array[0].name = 'foo';
array[1].name = 'bar';

https://jsfiddle.net/0f6L1x44/

If you need to add names more dynamically, you could do something like:

findById(100).name = 'foo';
findById(200).name = 'bar';

function findById(id) {
    var index = array.map(function(item) { return item.id; }).indexOf(id);

    return array[index];
}

https://jsfiddle.net/pj31n0Lj/

Note: I cleaned up your array objects in this example. Not sure why you have content1 and content2, etc.

Answer 5

I have an object like:

$scope.object={array1: [ ], array2:[ ] };

How can I push new values into those arrays?

When I try $scope.object.array1.push(value); i get an error saying: cannot read push.