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：