Невозможно выполнить итерацию по полученным данным

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

Вы разрешаете обещание до того, как все вызовы, заполняющие массив, закончились.

Это означает, что 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); на самый внутренний обратный вызов и называть его только после завершения всех обратных вызовов.