$http AngularJS calls stored in array sequentially - angularjs

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.

Answer 1

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

Answer 2

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.