angularJS 数组元素显示为未定义

Question

我正在调试一个用 angularjs 编写的 web 应用程序，我可以看到数组包含所有值，但是当我开始遍历项目并想在手表上查看每个项目的值时，它显示为未定义，但是我可以看到数组和值。这可能是我设置计数器的方式？

这是在 Chrome 的开发者工具中显示的内容：

当我在第 0 项上选择 data.[i].Name 时，它​​表示它是未定义的，但正如您在右侧看到的那样，该数组包含值。

你能看出我的错误在哪里吗？

谢谢你， 伊拉斯莫

更新的屏幕截图

Answer 1

首先，您正在迭代的data 对象实际上包含另一个名为data 的属性，因此您需要在循环开始时将其引用为data.data。

你还需要在你的函数回调中定义数组项，然后你可以在没有索引i的情况下引用它：

angular.forEach(data.data, function(item) {
    var b = {
        Name: item.Name,
        Email: item.Email
    };

    $scope.arr.push(b);
});

为了简洁起见，我将离开 i，因为它与您的循环操作无关。您当然可以根据需要重新引入它。

通过将此参数添加到您的函数回调中，您是在告诉迭代器，“当我遍历这个名为 data 的数组时，只需调用每个条目 item。”这样您就不必维护计数器。举个更通用的例子，这两个循环产生相同的输出：

data = ['a', 'b', 'c'];

angular.forEach(['a', 'b', 'c'], function(item) {
    console.log(item);
}); 

for(var i = 0; i < data.length; i++) {
    console.log(data[i]);
}

您仍然可以从函数回调中获取当前循环索引以及对象本身的句柄：

angular.forEach(data, function(item, index, obj) {
    console.log("Item " + index + " of " + obj + " is " + item);
});

有关详细信息，请参阅AngularJS API。