AngularJS inserting new properties to an object using a loop

Question

I need to combine two arrays together. In the this code block I'm trying to get each user row from the foo array and make it into a new array.

UserService.GetUserFoo(id)
        .success(function (data) {         
         data = angular.fromJson(data); //[{id:1, u_id:1, foo:"a"}{id:2, u_id:2, foo:"b"}]

         angular.forEach(data, function(user){
                getUser(user.u_id)   }); //FUNCTION CALL       
         }).
        error(function(error) {
         //do something       
      });

In this code block, the getUser function is called in the GetUserFoo service to populate a new array called $scope.users

$scope.users = []; //[{id:1, name:"Ed"},{id:2, name:"Jim"}]
      var getUser = function(id) {
            UserService.GetUserById(id)
            .success(function (data) {
              data = angular.fromJson(data);
                $scope.users.push(data); //                
            }).error(function(error) {
                       //do something
            });
        };

QUESTION --> How do insert each foo field into each corresponding $scope.users object so that in my view i can have something like this

//[{id:1, name:"Ed", foo:"a"}{id:2, name:"Jim", foo:"b"}]

<li ng-repeat="user in users">
<h2>{{user.name}}</h2>
<p>{{user.foo}}</p>
</li>

lucas · Accepted Answer · 2015-06-24 23:18:38Z

1

function ctrl($scope){
    $scope.users=[
        {id:1,name:"user 1"},
        {id:2,name:"user 2"}
    ];
    $scope.fooUser=[
        {id:1,foo:"foo 1"},
        {id:2,foo:"foo 2"}
    ];
    
    $scope.insertProperty=function(){
       
        for(var i=0;i<$scope.users.length;i++){
            for(var j=0;j<$scope.fooUser.length;j++){
                if($scope.users[i].id==$scope.fooUser[j].id)
                    $scope.users[i].foo=$scope.fooUser[j].foo
            }
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ctrl">
    <ul>
        <li ng-repeat="user in users">
             <h2>{{user.name}}</h2>

            <p ng-cloak>{{user.foo}}</p>
        </li>
    </ul>
    <button ng-click="insertProperty()">insert property</button>
</div>

for this one you dont need to worry about the length and orders of the two arrays

answered Jun 24, 2015 at 23:18

lucas

5032 silver badges13 bronze badges

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

2 Comments

lucas Over a year ago

the logic inside 'insertProperty' function show you how to insert property that you asked. but where to trigger this function really depends on your case. if your getUserData service is an ajax call, you may want to run insertProperty function in the success method of your ajax call

teddybear123 Over a year ago

Perfect thanks, i've inserted in in all the lines i could think of.. i didn't realize it should goin the success method

ngDeveloper · Accepted Answer · 2015-06-24 23:13:25Z

1

As long as both array have the same length, and each id in the array is in the same position in both array:

var array1 = angular.copy($scope.users);
var array2 = angular.copy(data);

$scope.users = mergeArray(array1, array2);

function mergeArray (array1, array2) {
  for (index in array1) {
    angular.extend(array1[index], array2[index]);
  }
  return array1;
}

answered Jun 24, 2015 at 23:13

ngDeveloper

1,3042 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

AngularJS inserting new properties to an object using a loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related