Looping through objects in Angular HTTP request, wait until response before running next loop

Question

I have this code:

// HTTP request
$http.get(dataSource).
then(function(data, status, headers, config) {
    // Products array
    var products = [];

    // Loop through each array value
    for (var slug in data.data){

        var product = data.data[slug];
        $http.get('content/products/' + product + '.json').then(function(response){

            products.push(response.data);
            $scope.products = products;

        }).catch(function(){

            console.log('there was an error');

        });

    }

}).catch(function(){
    console.log('there was an error');
});

The issue is that sometimes the product scope array items do not arrive always in the same order they are requested.

I need the products $scope to loop through the array and only when the response has been pushed to the array:

products.push(response.data);

that is finally assigned to the variable $scope.products.

Any help with modifying my current HTTP request?

morels · Accepted Answer · 2016-03-15 14:02:08Z

2

The problem resides in the for loop, that is synchronous, containing asynchronous code. In practice there is no guarantee that the inner http.get processes data in the same order it is get.

Try this:

// HTTP request
$http.get(dataSource).
  then(function(data, status, headers, config) {
    // Products array
    var products = [];

    // Loop through each array value
    var promises = [];
    for (var slug in data.data){

      var product = data.data[slug];
      promises.push($http.get('content/products/' + product + '.json'));
    }

    $q.all(promises).then(function(response){

      for (var i=0,len = response.length;i<len;++i){

        products.push(response[i].data);

      }
      $scope.products = products;

    }).catch(function(){

        console.log('there was an error');

    });

  }).catch(function(){

    console.log('there was an error');

  });

I suggest to use $q.all() to preserve the order of the http.get results. Look also that $scope.products is after the for loop that assigns data values to products array as you specified.

edited Mar 15, 2016 at 14:02

answered Mar 15, 2016 at 12:34

morels

2,11520 silver badges24 bronze badges

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

3 Comments

Lovelock Over a year ago

Thanks! Looking good up until the product.push. 'resp.data' is undefined. If I console log the response I get the correct objects of data, the for loop isn't working as expected. Console logging 'resp' in the loop simply returns the object index number, (0,1,2,3,5). Any ideas?

Lovelock Over a year ago

actually, sorted it now. In the for loop had to do products.push(response[resp].data)

morels Over a year ago

@Lovelock ok anyway I replaced the for( ..in..) loop with the traditional one.

Collectives™ on Stack Overflow

Looping through objects in Angular HTTP request, wait until response before running next loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related