How to make sure that $http requests are executed in sequence inside loop [duplicate]

Question

I'm in need to make ajax chain request.

function _GetCustomerDetails() {
  //Customer
  for (var i = 0; i < 5; i++) {
    dataService.get(sData, 'Customer').then(function(data) {
      if (data.entity === "Customer" && data.rows != undefined && data.rows.length > 0) {
        var len = data.rows.length;
        for (var i = 0; i < len; i++) {
          if (data.rows[i] != undefined) {
            //load related entity
            dataService.get(data.CustomerId, 'CustomerRelatedEntity').then(function(data) {
            });
          }
        }
      }
    });
  }
}

However, the customer data is loading fine but the nested related entity is not loading correct. It fills all the data with the last one.(i.e, the customer at index =4)

This is how my data service looks like.

 angular
  .module('app')
  .service('dataService', dataService);

dataService.$inject = ['$http', '$q'];

function dataService($http, $q) {
  var service = {
    get: _get,

  }
  return service;

  function _get(data, tableName) {
    var deferred = $q.defer();
    var url = "API_Url";
    return $http({
        method: 'GET',
        url: url,

      })
      .then(success)
      .catch(exception);

    function success(response) {
      deferred.resolve(response.data);
      return deferred.promise;
    }

    function exception(ex) {
      deferred.reject(response);
      return deferred.promise;
    }

  }

@Kgn-web How are you passing the index to the service. I dont see any index at all? data.customerId, doesnt make sense. It would have if it's something like data.rows[i].customerId. — karthick
– karthick, Commented Jul 13, 2017 at 22:53

lin · Accepted Answer · 2017-07-16 10:52:50Z

2

You could easily do it by using a generator like tj/co. In that way your loop steps will be forwarded once your promise has been recived. This example will work fine if data.rows is an array.

function _GetCustomerDetails() {
  dataService.get(sData, 'Customer').then(function(data) {
    if (data.entity === "Customer" && data.rows != undefined && data.rows.length > 0) {
      co(function*() {
        for (var i = 0; i < data.rows.length; i++) {
          let data = yield new Promise(function(resolve, reject) {
             dataService.get(data.rows[i].CustomerId, 'CustomerRelatedEntity').then(function (result) {
                resolve(result);
             });;
          });
          console.log(data);
        }
      });
    }
  });
}

Reproduce your problem

Take a look at this demo fiddle which reproduces your problem. As you can see, the loop finished before all requests respond / finished.

Fix your problem

Take a look at this demo fiddle which is one way to fix your problem and sync your loop. As you can see, the loop waits for all request to finish before starting the next loop sequence.

edited Jul 16, 2017 at 10:52

answered Jul 13, 2017 at 22:42

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

13 Comments

Kgn-web Over a year ago

data.rows is an array but the issue is while loading the related entity & I am getting the related entity of the last one.(i=4) Please check the updated post, I have added a for loop on the top of the controller.

lin Over a year ago

Yes m8, I did understand your problem and this answer solves it. Your loop does not wait for an HTTP-Request to finish because its ASYNC. In that way you fire all your HTTP-Request in a loop and you do not know which HTTP-Request finished at first or last. That means e.g. that your HTTP-Request you fired at the last loop could be the first which is responding.

Kgn-web Over a year ago

Okay.Let me check with my case. Thanks :)

lin Over a year ago

@Kgn-web Does it work for you?

Kgn-web Over a year ago

Thanks mate :) I am marking your post accepted.

|

Collectives™ on Stack Overflow

How to make sure that $http requests are executed in sequence inside loop [duplicate]

1 Answer 1

Reproduce your problem

Fix your problem

13 Comments

Linked

Hot Network Questions