$http AngularJS calls stored in array sequentially

Question

I've been looking and looking everywhere for an example of how to get this to work appropriately. I've tried using $q.all() and it doesn't work. I can't seem to get promises to work appropriately or I'm not accessing them correctly. I'm making an API call to retrieve information about movies and I want to keep them ordered by release date. The easiest way would be to keep the call in the order I make them. I order the movie ids by release date and call them in that array order. Then I want to push the data from the call to a new array. But it's instead not always doing it in the correct order. Could someone possibly tell me what I may be doing wrong?

$scope.movies = [
      {url:"tt3470600", group:"m",youtube:"Vso5o11LuGU", showtimes: "times1"},
      {url:"tt3521164", group:"m",youtube:"iAmI1ExVqt4", showtimes: "times2"} 
  ];

$scope.imdb = function () {
    var promises = [];
    for(var i = 0; i < $scope.movies.length; i++) {
        var movie = $scope.movies[i];
        var options = {trailer: movie.youtube, times: $scope.times[movie.showtimes]};
        var promise = $http.get('http://www.omdbapi.com/?i=' + movie.url);
        promise.times = options;
        promises.push(promise);
    };
    return $q.all(promises);
  };
    var x = $scope.imdb();
    console.log(x);

What's returned is an object d with a key of $$state. I would love to keep the order desperately because the times I return have a date selection that I would like to keep ordered.

you're making asynchronous calls to get data. When each call is completed can be different. What you'll want to do is sort the results once all promises are completed. — Tah, Dec 17 '16 at 03:54

score 0 · Answer 1 · answered Dec 17 '16 at 04:21

I think you just missed something important here which is

var deferred = q.defer(); //init promise

and also

deferred.resolve(item); // resolve the promise

besides that

don't forget to handle error cases -> use deferred.reject(item) for those

Once you have done with all your promise, save all the results into the array

var arr = [];
q.allSettled(promises).then(function(results) {
    arr = results;
});

Gnana Sekar.J · Answer 2 · 2016-12-17T06:16:01.820

You can use $q in a func to return a promise and make the http call inside that function and then call this based on the order you desire to get the array of promises.

  var ajaxcallURl = {
    0: 'https://api.github.com/users?since=84',
    1: 'https://api.github.com/search/users?q=tyler',
    2: 'https://api.github.com/users?since=357',
    3: 'https://api.github.com/users?since=19990',
    4: 'https://api.github.com/search/users?q=john',
    5: 'https://api.github.com/users?since=2345',
    6: 'https://api.github.com/users?since=1899',
    7: 'https://api.github.com/search/users?q=james',
    8: 'https://api.github.com/users?since=786',
    9: 'https://api.github.com/search/users?q=nicholas',
    10: 'https://api.github.com/users?since=99'


}

    var SomeAsyncCall = function () {
    var status_deferred = $q.defer();
    var requestUrl = ajaxcallURl[count];
    $http.get(requestUrl).
        success(function (data, status, headers, config) {
            status_deferred.resolve(data);
        }).error(function (errdata, status, header, config) {
            //requestData call failed, pass additional data with the reject call if needed
            status_deferred.reject(errdata);
        });

    return status_deferred.promise;
}

With this promise array you can use $q.all to resolve all those and get the results when all those promises are done.

function createPromisesArray() {
    var promiseArray = [];
    for (var i=0;i<10;i++){
        promiseArray.push(SomeAsyncCall());
    }

    return promiseArray;
}


var lstPromised = createPromisesArray();

$q.all(lstPromised).then((values) => {
  console.log(values[0]);
  console.log(values[1]);
  // ....
  console.log(values[9]);

    values.forEach(function (result) {
        console.log(result)
    });

even though $q.all executes all promises asynchronously , you can get the appropriate promise result from the array.

$http AngularJS calls stored in array sequentially

2 Answers2