AngularJS在$ http调用的循环中收集数据

时间:2014-04-29 09:30:49

标签: javascript angularjs

我有以下循环,我必须在我的客户端API上进行。在循环的每次迭代中,我必须将从API调用返回的数据作为对象添加到对象数组,然后在循环结束时我需要显示对象数组的内容。

由于JS代码执行的性质(asynchronous)显示对象数组内容总是返回undefined,所以我想知道是否有人可以帮我解决这个问题。感谢。

  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

1 个答案:

答案 0 :(得分:3)

您需要做的是存储所有承诺,然后将这些承诺传递给$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的好教程: