AngularJS gathers information through a series of $http requests loop

Question

AngularJS gathers information through a series of $http requests loop

Currently, I am facing an issue with a loop in my client API. The loop is supposed to add data returned from an API call as an object to an object array in each iteration and then display the content of the object array at the end of the loop.

However, due to the asynchronous nature of JS code execution, when trying to display the content of the object array, it always returns undefined. I am seeking assistance in finding a solution to this problem. Your help would be greatly appreciated. Thank you.

  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

javascript angularjs

Answer 1

Answer №1

To efficiently manage multiple promises in AngularJS, you can store them all and then pass them to $q.all (scroll all the way down). This method wraps all promises into one big promise that will only be resolved if all individual promises are resolved.

Make sure to update your code as follows:

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]);
});

For a helpful tutorial on using $q.all, check out this Egghead video.

Answer 2

To efficiently manage multiple promises in AngularJS, you can store them all and then pass them to $q.all (scroll all the way down). This method wraps all promises into one big promise that will only be resolved if all individual promises are resolved.

Make sure to update your code as follows:

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]);
});

For a helpful tutorial on using $q.all, check out this Egghead video.

AngularJS gathers information through a series of $http requests loop

Answer №1

Similar questions

Arranging objects in an array based on their specific property

Is there a method to keep the leftmost column in a Google visualization table anchored in place when scrolling horizontally?

Attempting to retrieve XML/JSON

webdriverio fails to render the page on the browser

Dealing with unhandled exceptions while passing promises into pg-promise batch transactions

To apply a background color to a specific <td>, simply enter the position number into the 3rd textbox using JavaScript

jest - SyntaxError: Unexpected token 'export'

Using AJAX to send both data input values and file attachments simultaneously to a PHP server

What is the best way to retrieve the value of an nth column in a table using

Issue with Angular ng-repeat not updating after array push

What can be done to address columns overlapping when sidebar is activated?

What could be causing the 401 status code in my sign_in.json request? (Guide on AngularJS and Rails from Thinkster)

Regular expression that prohibits the acceptance of numbers with leading zeros

Edit images prior to uploading to the server by adjusting the size or dimensions as raw binary data (format should be either png or jpeg

Is it possible to prevent a webpage from being refreshed?

AngularJS ng-repeat inside a directive executed twice

Triggering the click event three times on a dynamically generated element

"Bringing angular2-cookie into an angular4 project: A step-by-step guide

Unable to adjust layout when code is functioning alongside background-color

Getting the result from a JavaScript request, whether it's synchronous or asynchronous