AngularJS collecting data in a loop of $http calls

Question

I have the following loop which I have to make on my client API. On each iteration of loop I must add data returned from the API call as an object to an object array, then at the end of the loop I need to display the content of the object array.

Due to the nature of JS code execution (asynchronous) displaying the object array content always return undefined, so I was wondering if someone can please help me with a solution to this problem. Thanks.

  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

thomaux · Accepted Answer · 2014-04-29 09:35:32Z

3

What you'll need to do is store all promises and then pass these to $q.all (scroll all the way down), which will wrap them in one big promise that will only be resolved if all are resolved.

Update your code to:

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 is a nice tutorial to using $q.all:

answered Apr 29, 2014 at 9:35

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MChan Over a year ago

Thanks a lot, $q.all solved the problem instantly :)

thomaux Over a year ago

Great, glad to have helped!

Collectives™ on Stack Overflow

AngularJS collecting data in a loop of $http calls

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related