AngularJS使用循环向对象插入新属性

时间:2015-06-24 23:00:14

标签: javascript arrays angularjs for-loop foreach

我需要将两个数组组合在一起。 在这个代码块中,我试图从foo数组中获取每个用户行并使其成为一个新数组。

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       
      });

在此代码块中,在GetUserFoo服务中调用getUser函数以填充名为$ 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
            });
        };

问题 - >如何将每个foo字段插入到每个相应的$ scope.users对象中,以便在我的视图中我可以有类似这样的内容

//[{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>

2 个答案:

答案 0 :(得分:1)

只要两个数组具有相同的长度,并且数组中的每个id在两个数组中都处于相同的位置:

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;
}

答案 1 :(得分: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>

对于这个你不需要担心两个数组的长度和顺序