Do a loop instead of multiple $http chaining? - angularjs

Question

sorry, i have checked answers, but still dont understand how to make it :
I've got an array :
var surfaces = [
{min:0,max:499},
{min:500,max:999},
{min:1000,max:1499},
{min:1500,max:1999},
{min:2000,max:2399},
{min:2400,max:2999},
{min:3000,max:3999},
{min:4000,max:5999},
{min:6000,max:100000}
]
And I've got this looong $http chained calls with $q :
$q.when()
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[0]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[1]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[2]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[3]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[4]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[5]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[6]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[7]).success(function(data){
$scope.normes.push(data);
})
})
.then(function () {
$http.post('backend/backend.php?action=get_normes',surfaces[8]).success(function(data){
$scope.normes.push(data);
})
})
I'd rather do a loop, but have now idea on how to do this !!
EDIT : I've got way bigger problem : data is not in order in $scope.normes ! Its always different ! How could i do to always push in order ? How could the data could be in order ?
I got ng-repeats like this but the information is not well ordered because of $http synchornicity ;
<div class="row ">
<div class="col-lg-10" style="overflow: auto; max-height: 600px;">
<table class="table table-bordered table-hover " border="1" >
<thead >
<tr>
<th> Désignation</th>
<th> Total Magasins</th>
<th> Moy Habitants Zone</th>
<th> Ca Moyen</th>
<th> EO Mini</th>
<th> EO Maxi</th>
<th> Coef Moyen</th>
<th> Pourcent Côtier</th>
<th> Pourcent Urbain</th>
<th> Tx Habituels</th>
<th> Tx fréquentation</th>
<th> Tx fidélisation</th>
<th> Zone Attraction</th>
<th> Revenus Zone</th>
<th> Nb Perso Foyer</th>
<th> Age Moyen</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="norme in normes" >
<td>Surface 0-499 m²</td>
<td>{{::norme.nb_magasins | number:0}}</td>
<td>{{::norme.moy_habitants_zone | number:0}}</td>
<td>{{::norme.ca_moyen | number:0}}</td>
<td>{{::norme.eomin | number:0}}</td>
<td>{{::norme.eomax | number:0}}</td>
<td>{{::norme.coef_moyen | number:2}}</td>
<td></td>
<td></td>
<td>{{::norme.tx_habituels | number:2}}</td>
<td>{{::norme.tx_frequentation | number:2}}</td>
<td>{{::norme.tx_fidelisation | number:2}}</td>
<td>{{::norme.attraction | number:0}}</td>
<td>{{::norme.revenus_zone | number:0}}</td>
<td>{{::norme.nb_pers_foyer | number:2}}</td>
<td>{{::norme.age_moyen | number:2}}</td>
<td ></td>
</tr>
</tbody>
</table>
</div>
Each time i redo the $q, it comes with a different order ! How could i do ?
EDIT : So I'm now getting standards JSON objects from the Back End so it is simplier(Editied the html table on this post), but with the solutions you gently provided, it doesnt appear yet in the right order. The $http get started in the right order, but it seems that $scope.normes doesnt list as the $http have been started ! (Oh i think i maybe can order with the orderby in the front end... I forgot, but i thought it was possible to order the json objects as they get pushed into the array, but in the view it doesnt appear as when the $http have been called)

Answer 1

Try this::
$scope.onAllDone = function() {
var promises = [];
angular.forEach(surfaces , function(surface) {
promises.push($http.post('backend/backend.php?action=get_normes',surface)).then(function(data) {
$scope.normes.push(data);
return data;
});
});
return $q.all(promises);
}
USE::
$scope.onAllDone().then(fnSuccess, fnError);

Answer 2

Promises and $q.all (doc) are your friends.
In more detail, you will have to make a promise for each call (if the call itself does not return one), push them in an array and call $q.all(promises).then(allFinished).
function callUpdate(x, promises) {
var d = $q.defer();
$http.post('backend/backend.php?action=get_normes',x).then(function(resp){
$scope.normes.push(resp.data);
d.resolve(resp.data);
})
promises.push(d.promise);
}
...
var promises = [];
$scope.normes = [];
for (var i = 0; i < surfaces.length; i++) {
callUpdate(surfaces[i], promises);
}
$q.all(promises).then(function() {
// called when all promises have been resolved successully
});

Answer 3

Create an array of promises
var promises = [];
surfaces.forEach(function(surface){
promises.push($http.post('backend/backend.php?action=get_normes',surface));
})
You can use $q.all() and wait for all promises to complete and use Array.concat() to create $scope.normes array.
$q.all(promises).then(function (results) {
$scope.normes = [].concat.apply([],results);
});

Answer 4

When chaining promises, it is important to return the subsequent promise to the .then method handler function:
var arrayPromise = $q.when([])
.then(function (dArray) {
var httpPromise = $http.post('backend/backend.php/action=get_normes',surfaces[0])
var dPromise = httpPromise.then(function(response) {
$scope.normes.push(response.data);
dArray.push(response.data);
return dArray;
});
return dPromise;
}).then(function(dArray) {
console.log("one XHR is complete");
console.log(dArray);
});
When the code fails to return anything to the handler function, the $q service resolves the promise as undefined and immediately executes the next function. By returning the subsequent promise, the $q service will wait for the promise to resolve before executing the next promise in the chain.
That said. How to create a loop that chains sequential promises?
var arrayPromise = $q.when([]);
for (let n=0; n<surfaces.length; i++) {
arrayPromise = arrayPromise
.then(function (dArray) {
var httpPromise = $http.post(url,surfaces[n]);
var dPromise = httpPromise.then(function(response) {
$scope.normes.push(response.data);
dArray.push(response.data);
//return dArray to chain
return dArray;
});
return dPromise;
});
};
arrayPromise.then(function(dArray) {
console.log("all XHRs are complete");
console.log(dArray);
}).catch(function(errorResponse) {
console.log("one of the XHRs failed");
console.log(errorResponse.status);
throw errorResponse;
});
Create a variable with a promise for an empty array. Then in the loop simply assign the promise derived from the .then method back to that variable. Each iteration of the loop returns an array that is one item larger than the previous iteration. Also each iteration has the side effect of pushing an item to scope.