angular.forEach 和对象答案

【问题标题】：angular.forEach and objectsangular.forEach 和对象
【发布时间】：2014-02-18 18:09:47
【问题描述】：

问题：

我正在（我认为是但可能不是）对数组执行简单的angular.forEach，然后使用$resource 根据返回的每个值进行调用。正如我所料，每次调用的结果都是一个对象。但是，我无法让这些对象以angular.forEach documentation 演示的方式和谐地结合在一起。

但首先，一些有效的代码，然后看看失败的代码。

作品：

var uniqueIds = {};
angular.forEach(object, function(key, value){
    this.push(key.uniqueIds);
}, uniqueIds);
console.log(uniqueIds)
// uniqueIds equals the expected array

失败

这就是事情变得棘手的地方。现在，在下一个示例中，angular.forEach 内部是一个 $resource 调用。

angular.forEach(array, function(index){
    Resource.query({id:index}, function(result){
        console.log(result)
        // returns the expected object, 
        // but, as expected, I can't access the object outside the async call
    });
    console.log(result);
    // result is undefined
 });

鉴于异步性，似乎一个承诺可以解决问题。但它没有——我真的还在异步调用中。将result 分配给$scope 也不起作用。简而言之，我似乎无法获得Resource.query 之外的值。

我需要做什么？

我需要每个$resource 调用的返回对象以与angular.forEach 创建数组相同的方式添加到一个对象（使用angular.extend？我试过了）。我尝试了许多不同的方法，大多数都基于此处提出的一般异步问题的答案，但到目前为止无济于事。我很肯定从$resource 调用中获取值是一个问题，但在这种情况下如何做到这一点我有点困惑。

【问题讨论】：

标签： javascript angularjs object asynchronous foreach

【解决方案1】：

Angular documentation 有很好的例子

var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
    this.push(key + ': ' + value);
 }, log);

【讨论】：

【解决方案2】：

这样的？

var promises = [];

angular.forEach(array, function(index) {
  promises.push(Resource.query(...));
});

$q.all(promises).then(function(result1, result2, result3 ...) {
  // do stuff with result1, result2 ... or
  // var results = Array.prototype.slice.call(arguments);
});

【讨论】：

我对这个解决方案的优雅和简单感到震惊。正是我需要的。
这是给你的 AngularJS，@jodytate :)
使用 foreach 构建数组似乎是多余的，因为您可以简单地使用 Array.map 将每个元素（或索引）映射到一个 Promise 数组，然后您可以将其传递给 $q.all

【解决方案3】：

.query 返回一个数组引用，当 xhr 完成时，该数组引用正在填充数据。由于id 可能是一个唯一标识符，因此查询将返回包含单个元素的数组，这就是为什么我建议您改用.get。

无论如何，如果您仍然打算使用.query，您可以执行以下操作：

var arrays = [];
angular.forEach(array, function(index){
    arrays.push(Resource.query({id:index}, function(result){
        console.log(result)
        // returns the expected object, 
        // but, as expected, I can't access the object outside the async call
    }));
    console.log(result);
    // result is undefined
});

$scope.$watch(function () {
    return arrays;
}, function (arrays) {
    angular.forEach(arrays, function (array) {
       angular.forEach(array[0], function () {
          //Do something with the object fields
       });
    });
});

如你所见，代码看起来很糟糕......

为了达到更好的效果，你可以使用：

var objects = [];
angular.forEach(array, function(index){
    objects.push(Resource.get({ id:index });
});

$scope.$watch(function () {
    return objects;
}, function (objects) {
    angular.forEach(objects, function (obj) {
       angular.forEach(obj, function () {
          //Do something with the object fields
       });
    });
});

如果您让 AngularJS 通过将objects 分配给$scope 属性来执行$watch，那就更好了。

【讨论】：