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

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

  }

Answer 1

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.