AngularJs Promise $q

Kitano
Javascript

Bonjour, J'ai une petite problèmatique.

j'aimerais construire un tableau grace a plusieurs requete api, j'utilise le service ressource pour me connecter à l'api, cette partie fonctionne tres bien.

Voici une partie de mon controller : 

            var getFullData = function(coursesData) {

                angular.forEach(coursesData, function(value, key) {
                    ClientService.client.get( {id: value.client} ).$promise.then(function(client) {
                        value.client = client.first_name+' '+client.last_name;
                    });
                }, coursesData);

                return coursesData;
            };

            $scope.setPagingData = function(courses) {
                var coursesData = courses.results;
                $scope.courses = getFullData(coursesData);

                $scope.totalServerItems = courses.count;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            };

J'aimerais que $scope.courses récupére les infos de getFullData(coursesData) que quand cette fonction aura terminée le forEach et que mes promises (il y en aura plusieurs dans la boucle) soit terminées.

4 réponses

Maenhyr
Réponse acceptée

J'essayerai de voir le problème d'une autre façon. Ne peux tu pas envoyer directement le tableau d'id en paramètre GET de ClientService.client.get( {id: value.client} ) ? Parce que la tu effectues autant de requêtes que tu ne possèdes d'id, cela surcharge ton serveur.

Sinon, si tu souhaites rester sur le code actuel, tu as la méthode $q.all() qui va te permettre de n'effectuer le code que lorsque toutes les promesses sont résolues.

Kitano
Auteur
Réponse acceptée

Merci pour vos réponses.

Pour conclure, l'utilisation de $q.all est tres pratique, effectivement l'api que j'utilisais n'était pas opti a la base, elle me retounée que les ids alors que j'ai besoin de toute les informations.
Maitnenant que j'ai les bonne infos, mon code est plus simple et clair:

            var getFullData = function(coursesData) {
                var deferred = $q.defer();
                var detailedCoureses = [];

                    angular.forEach(coursesData, function (value, key) {
                        detailedCoureses.push({
                            'id': value.id,
                            'date': value.shedule_at,
                            'client': value.client.first_name + ' ' + value.client.last_name,
                            'vehicle': value.vehicle,
                            'start_at': value.start_at,
                            'end_at': value.end_at,
                            'short_note': value.short_note,
                            'notes': value.notes
                        })
                    }, coursesData);

                $q.all(detailedCoureses).then(function() {
                    deferred.resolve(detailedCoureses);
                });

                return deferred.promise;

            };

            $scope.setPagingData = function(courses) {
                var coursesData = courses.results;

                getFullData(coursesData).then(function(courses) {
                    $scope.courses = courses;
                });

                $scope.totalServerItems = courses.count;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            };
Kitano
Auteur

J'ai réussi a allez jusqu’à ce stade, mes clients semble bien chargé par contre comment faire pour resolve plusieurs choses avant le return ?

           var getFullData = function(coursesData) {

                var deferred = $q.defer();

                angular.forEach(coursesData, function(value, key) {

                    ClientService.client.get( {id: value.client} ).$promise.then(function(client) {
                        value.client = client.first_name+' '+client.last_name;
                        deferred.resolve(coursesData);
                    });

                    VehicleService.vehicle.get( {id: value.vehicle} ).$promise.then(function(vehicle) {
                        value.vehicle = vehicle.immatriculation;
                    });

                }, coursesData);

                return deferred.promise;
            };

            $scope.setPagingData = function(courses) {
                var coursesData = courses.results;

                $scope.courses = getFullData(coursesData).then(function(courses) {
                    $scope.courses = courses;
                });

                $scope.totalServerItems = courses.count;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            };
Grafikart

Tu veux attendre que les 2 données soient chargé pour résolve ?

Si oui dans ce cas mettre une variable que tu incrémente dans le callback. Et ensuite si la variable == 2 alors tu resolve ^^