无法迭代检索到的数据

Question

我的friendsService中有一个函数，它返回一个对象数组。

getTopFriends: function () {
var deferred = $q.defer();
var data = [];
FB.api('/me/photos/uploaded', function(response) {
    angular.forEach(response.data, function(key, value) {
        FB.api('/' + key.id + '/tags', function(response) {
            angular.forEach(response.data, function(key, value) {
                var res = {
                    id: key.id,
                    name: key.name
                }
                FB.api('/' + key.id + '/picture?width=200&height=200', 'GET', function(response) {
                    res.url = response.data.url;
                    data.push(res);
                });
            });
        });
    });
    deferred.resolve(data);
});
return deferred.promise;

}

然后在我的控制器中，我这样使用它：

friendsService.getTopFriends().then(function(data) {
  console.log(data);
});

我得到了这样的回应，这是可以预料的。

但是如果我尝试使用angular.forEach()迭代这些数据，我在控制台中没有得到任何结果或错误。我如何找出代码中的问题以及如何修复它？

Answer 1

在填充数组的任何调用完成之前，您正在解析promise。

这意味着以下data：

friendsService.getTopFriends().then(function(data) {
  console.log(data);
});

将是一个空数组。

angular.forEach()不会给出任何错误，但由于没有元素，所以不会做任何事情。

console.log的工作方式略有不同。

在箭头旁边的屏幕截图顶部，您会看到一个空数组：[]

这意味着当执行console.log(data)语句时，数组为空。

事实上，如果你将i悬停在蓝色背景下，它会说：

Object value at left was snapshotted when logged, value below was evaluated just now.

当您在控制台中单击以展开并检查阵列的内容时，将重新评估并显示该阵列。此时api调用已完成并且阵列已填充。

您只需将deferred.resolve(data);的呼叫移至最内部回调，并且只在所有回调完成后调用它。