将对象文字推入数组(重复自身..)

时间:2014-06-19 23:25:33

标签: javascript angularjs

我不认为这是一个有角度的问题,虽然我在使用角度ng-repeat指令时偶然发现了这个问题。

我正在尝试使用push将javascript对象文字存储到数组中,因此我可以在ng-repeat中迭代它。

例如:

$scope.items = [];

var item = {
   name: "bob"
};

$scope.items.push(item);
item.name = "mary";
$scope.items.push(item);

此时,$ scope.items []持有名称为Mary的2个实例,而不是同时包含Bob和Mary。这是违反直觉的,因为我认为push应该只是将下一个项目附加到数组的末尾。

我的真实代码(摘要)如下所示:

$scope.items = [];

var item = {
   name: "";
};

for (var i = 0; i < 10; i++) {
   // I dynamically set the item.name to some value using retrieved values from server
   item.name = someValueFromServer;

   $scope.items.push(item);
}

所以,再次,在for循环结束时,我没有10个不同的名称,而是检索到最后一个的SAME 10名称。

我无法弄清楚如何解决这个问题,也无法在网上找到任何东西。我对此很新,所以我可能一直在寻找错误的东西。

任何帮助都会很棒。非常感谢!

2 个答案:

答案 0 :(得分:2)

每次都会覆盖同一个对象。

for (var i = 0; i < 10; i++) {
    var item = {
       name: someValueFromServer;
    };
    $scope.items.push(item);
}

答案 1 :(得分:1)

如前所述,您正在将对象引用推送到scope.items,然后更改对象。导致所有引用都被更新。

以下是一些替代方案:

var scope = {};
scope.items = [];
var arr = [1,2,3,4,5];

//Passing an anonymous object
for( var i = 0, len = arr.length; i < len; i++){
    scope.items.push({name: arr[i]}); 
}

console.log(scope.items); ////[ { name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 } ]

function Item(value){
    this.value = value;
}

//Or with a defined object
scope.items2 = [];

for(var i =0, len =arr.length; i < len; i++){
    scope.items2.push(new Item(arr[i]));
}

console.log(scope.items2); //[ { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 } ]

//Or to declare item inside of the for loop, so that it is reinitialized each time
scope.items3 = [];

for(var i =0, len = arr.length; i < len; i++){
    var item = { name: 'somevalue ' + i };
    scope.items3.push(item);
}

console.log(scope.items3); /*[ { name: 'somevalue 0' },
                             { name: 'somevalue 1' },
                             { name: 'somevalue 2' },
                             { name: 'somevalue 3' },
                             { name: 'somevalue 4' } ]*/