AngularJs $q.all use

Question

i am using multiple asynchronous calls, I do get the result but when i want to use the arrays where i saved this result a lot of problems appear, when I looked i found that the solution is using $q.all which i never used before and when i read the documentation i still didn't understand where i should add it, here is my code :

FT.getFT().then(function (result) {       
               if(result.data.success)
               {   
                for(var i=0; i<result.data.ftListe.length;i++) 
               {
                // récupérer le collaborateur de la feuille de temps par son id  
                  Compte.getComptesbyId(result.data.ftListe[i].collaborateurid).then(function(result)
                   {
                      lecollaborateur.push(result.data.col);
                   }); 

                //Get the name of the task related to the timesheet
                 Tache.getTachebyId(result.data.ftListe[i].tacheid).then(function(result)
                   {
                     Projet.getProjetbyId(result.data.tachelistes.projet_id).then(function(result)
                                {
                                  projets.push(result.data.projetsListe);
                                });    
                    task.push(result.data.tachelistes);    
                 }); 
                     // get le projet lié à cette tache par id  


              }
             $scope.ftListe = result.data.ftListe;
             $scope.task = task;
             $scope.lecollaborateur = lecollaborateur;
             $scope.projets = projets;
            console.log(result.data.message);
            }else{
                console.log(result.data.message);
            }

        });

Answer 1

I can show how $q.all() works and write the example for one of your promises. Then is up to you to refactor all your code in the same way. I can also keep variable names in French :)

$q.all() allows you to resolve an array of promises which you give as parameter to all() . You will have as result of the promise an array where the elements are the corresponding results to your promises.

So, in your case, inside your main result, create an array of promises like this:

FT.getFT().then(function (result) {       
  if(result.data.success) {   
    var comptesPromises = [];

Inside your for, instead of resolving promises, just add to this array all your corresponding promises, like this:

comptesPromises.push(Compte.getComptesbyId(result.data.ftListe[i].collaborateurid));

Then outside your for, resolve all the promises and assign the returning values to your model:

$q.all(comptesPromises).then(function(comptes) {
  comptes.forEach(function(el) {
    lecollaborateur.push(el.data.col);
  });
});

You need to inject $q in order to use it.

I hope this helps.