AngularJS在$ http呼叫循環中收集數據

Question

我有我必須在我的客戶端API上進行的以下循環。在循環的每次迭代中，我必須將從API調用返回的數據作爲對象添加到對象數組中，然後在循環結尾我需要顯示對象數組的內容。

由於JS代碼執行的性質（asynchronous）顯示對象數組內容始終返回未定義，所以我想知道是否有人可以請幫我解決這個問題。謝謝。

var invoiceObj = {}; 
    var invoiceObjArray = []; 
    for (var i=0; i< 5; i++) 
    { 
     //getAllInvoices returns a promise from $http.GET calls... 
     ClientInvoiceService.getAllInvoices(i).then(function(invoice){ 

      invoiceObj = { invoiceNum: invoice.Result[0].id, 
          clientName: invoice.Result[0].clientName}; 

      invoiceObjArray.push(invoiceObj); 

     }, function(status){ 
      console.log(status); 
     }); 

    } 

    console.log(invoiceObjArray[0]); //return undefined 
    console.log(invoiceObjArray[1]); //return undefined 

Answer 1

什麼你需要做的是保存所有的承諾，然後通過這些來$q.all (scroll all the way down)，將他們包裝在一個大的承諾，如果一切都解決了，將只得到解決。

更新您的代碼：

var invoiceObj = {}; 
var invoiceObjArray = []; 
var promises = []; 
for (var i=0; i< 5; i++) 
{ 
     //getAllInvoices returns a promise... 
     promises.push(ClientInvoiceService.getAllInvoices(i).then(function(invoice){ 

      invoiceObj = { invoiceNum: invoice.Result[0].id, 
          clientName: invoice.Result[0].clientName}; 

      invoiceObjArray.push(invoiceObj); 

     }, function(status){ 
      console.log(status); 
     })); 

} 
$q.all(promises).then(function(){ 
    console.log(invoiceObjArray[0]); 
}); 

This Egghead video是一個很好的教程，使用$q.all：