2

I'm trying to write a function that sends multiple requests to the server based on the number of Ids in the idArray. The problem I'm facing is that the data that is pushed into the dataArray does not follow the proper sequence of the corresponding Ids of the idArray. I tried adding the timeout to the HTTP requests so that the previous request is fully processed before the next iteration of the for loop, but that too does not seem to work. Please help.

function commonService($http, $q) {
    return {
        getAboutContent: function() {
            var dataArray = [];
            var deferred = $q.defer();
            var idArray = ['about2', 'about3'];
            var count = 0;
            angular.forEach(idArray, function(id) {
                $http.get('server url/' + id).success(function(data) {
                    dataArray.push(data);
                    count++;
                    if (count == idArray.length) {
                        deferred.resolve(dataArray);
                    }
                }).error(function(error) {
                    console.log('error', error);
                    deferred.reject(error);
                });
            });
            return deferred.promise;
        }
    }
}
Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
Ashish Dwivedi
  • 149
  • 2
  • 11
  • Is there something in response headers/body that you can use to arrange responses in the correct order before returning? – Sergio Tulentsev Nov 30 '15 at 06:58
  • The response has unique titles in every object, but I'm not sure how to use them, as , if I use if(data.title== 'myTitle'){dataArray.push(data)}, it will skip to push the data into the array if the title does not match with myTitle and thus that iteration is lost and wasted. – Ashish Dwivedi Nov 30 '15 at 07:05

1 Answers1

0

You can not say with surety that the first AJAX call will be completed first as that is the asynchronous call. So if you are doing 3 calls using your for loop you can not guarantee that the response will come in the same order. So, assuming you can return the id from the server AJAX call then you can write like this:

function commonService($http, $q) {
    return {
        getAboutContent: function() {
            var dataArray = [];
            var deferred = $q.defer();
            var idArray = ['about2', 'about3'];
            var count = 0;
            angular.forEach(idArray, function(id) {
                $http.get('server url/' + id).success(function(data) {
                    // Return the "id" from the response and get the index position in the "idArray"
                    var idIndex = idArray.indexOf(data.id);
                    // Then insert data into the specific index as of "id"
                    dataArray[idIndex] = data;

                    count++;
                    if (count == idArray.length) {
                        deferred.resolve(dataArray);
                    }
                }).error(function(error) {
                    console.log('error', error);
                    deferred.reject(error);
                });
            });
            return deferred.promise;
        }
    }
}
Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
  • 1
    As per your suggestion I added a property Id and assigned a value same as that in idArray to the my actual data. This solves the issue by matching up the random sequence by inserting the values in the dataArray in this random sequence itself. Thanks. – Ashish Dwivedi Nov 30 '15 at 08:44