Add properties to array objects - AngularJS

Question

How can I add properties to objects in an array by looping through the array?

Example I have an array with objects; $scope.addresses contains many addresses.

And lets say that each object has only have 4 properties;

$scope.addresses[0].address_line1
$scope.addresses[0].address_line2
$scope.addresses[0].address_line3
$scope.addresses[0].city

Now I want to add more properties to each of the objects in the array.

$scope.addresses[0].location
$scope.addresses[0].neighbourhood

Any help appreciated.

I just want to manually add a property and set it to true or false — moh_abk
– moh_abk, Commented Jun 7, 2016 at 12:59

Ruan Mendes · Accepted Answer · 2016-06-07 14:13:54Z

3

Just assign a new property

$scope.addresses[0].location = 'Roxbury'

$scope.addresses[0].location must already be an object since you are setting properties on it.

To loop over addresses, use forEach or a standard for loop:

$scope.addresses.forEach(function(address, index) {
    address.location = locations[index];
});

for(var i=0; i < $scope.addresses.length; i++) {
  $scope.addresses[i].location = myLocations[i];
}

Or you could replace the entire addresses object using map

scope.addresses = addresses.map(address => Object.assign(
    {location: 'X'}, address));

edited Jun 7, 2016 at 14:13

answered Jun 7, 2016 at 12:44

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

moh_abk Over a year ago

Yes I can assign a property like you mentioned. But that will be for just one of the object. Imagine I have 100 addresses in $scope.addresses how will I do it? I can't do it manually by adding [0], [1] etc... So I would need to loop and add to all

Ruan Mendes Over a year ago

@shady87 That's correct, you don't know how to loop over the addresses?

moh_abk Over a year ago

Not in angular I'm a PHP developer

tymeJV · Accepted Answer · 2016-06-07 12:48:29Z

1

Use .map to loop the collection:

$scope.addresses = $scope.addresses.map(function(address) {
      address.location = "X";   
      return address;
});

answered Jun 7, 2016 at 12:48

tymeJV

105k14 gold badges165 silver badges158 bronze badges

3 Comments

Ruan Mendes Over a year ago

You're modifying the addresses, may as well use a forEach and drop the return...

Ruan Mendes Over a year ago

Or more simply addresses.map(address => Object.assign({location: 'X'}, address))

Ruan Mendes Over a year ago

After your change it still looks silly, you're returning a new array that contains the same references because you are modifying items in place so both arrays are affected. Still should be using a forEach, or you should be returning modified objects in the map function. Sorry, but I really dislike the misuse of Array#map "use map to loop over a collection" is really bad advice, "use map to create a new array with modified items" is much more true to map's semantics

phreakv6 · Accepted Answer · 2016-06-07 12:48:23Z

0

Simply using the . dot notion should do.

$scope.addresses[0].location = 'Iceland';

Just check for existence of $scope.addresses[0] before you do the assignment though otherwise you will get trying to access property of 'undefined' errors.

so something like

if($scope.addresses[0])
    $scope.addresses[0].location = 'Iceland';

answered Jun 7, 2016 at 12:48

phreakv6

2,1651 gold badge11 silver badges11 bronze badges

Comments

Shashank · Accepted Answer · 2016-06-07 13:02:46Z

0

You can use forEach loop and then add required items inside it:

angular.forEach($scope.addresses, function(v, k) {
    v.location = "New location " + (k + 1);
    v.neighbourhood = "New neighbourhood " + (k + 1);
  });

Watch demo here.

answered Jun 7, 2016 at 13:02

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

Add properties to array objects - AngularJS

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related