I have an array of cities with their name and url .
$scope.cities = [{'name':'LKO','url': 'http://sm.com'},{'name':'LK1O','url': 'http://sm1.com'}]
Now I need to make request to the url present in the city.. One after another as response of one request arrives.
I know this is possible using promises. But, I'm not able to get the exact solution.
You can use $q.all() to run code after an array of promises have all resolved
var promises = $scope.cites.map(function(city) {
return $http.get(city.url).then(function(resp) {
var cityData = resp.data;
// do something with cityData here
// then return it
return cityData;
});
});
$q.all(promises, function(cityDataArray) {
// do something with array
});
This approach assumes that the requests are not dependent on each other and is much faster than doing it recursively
Make sure to inject $q into service or controller where you make these requests
You can use recursive loop like in this example:
var app=angular.module("app",[]);
app.controller("main",function($scope,$q,$http){
$scope.cities = [{'name':'LKO','url': 'http://stackoverflow.com/posts/39497624'},{'name':'LK1O','url': 'http://stackoverflow.com/posts/39497624'},
{'name':'LK21','url': 'http://stackoverflow.com/posts/39497624'}]
//recursive function
function getUrl(i){
if (typeof $scope.cities[i]=='undefined')
return; //last one
console.log("ajax to "+ $scope.cities[i].url);
$http.get($scope.cities[i].url).then( getUrl(i+1) );
};
getUrl(0);//start
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="main">
</div>PS. i changed url to this github question.
The other answers are complicated. Here is a simpler one:
const cities = [{'name':'LKO','url': 'http://sm.com'}, ...]
const queue = $q.resolve(); // get an empty promise
for(const city of cities) { // angular.forEach if you want to avoid for...of
queue = queue.then(() => $http.get(city.url).then(/* write result to scope*/))
}
You just chain the promises in a loop.
