Resolve Multiple Promises in a Factory AngularJS

Question

I wrote this code that makes multiple $http calls recursively and save all the promises it returns in a array. Then I resolve all of them and save the response in another array.

My question is: How can I return this last array to my controller?

Here some code

My controller:

app.controller('searchCtrl', function($scope, $http, $q, Data, RankServices) {
    $scope.imagesData = [];
    $scope.getImages = function(userId){

        //RankServices.getImages is my factory
        $scope.imagesData = RankServices.getImages(userId, undefined);

    }
}

I made a Factory just to handle the $http requests:

app.factory('Data', function ($http, $q) {
  return {
    ajaxItems: function (url) {
      var deferred = $q.defer();
      $http.jsonp(url)
        .success(function (data, status, headers, config) {
          deferred.resolve(data);
        }).error(function (data, status, headers, config) {
          deferred.reject(data);
        });
      return deferred.promise;
    }
  }
});

And this is the main factory that uses the previous factory to perform $http call and save all promises in an array, resolve then and save data:

app.factory('RankServices', ['Data', '$q', function(Data, $q){
    var imagesDataPromises = [];
    var imagesData = [];

    return {
        getImages: function(userId, url){
          var self = this;
          if(url == undefined)
          var url = "http://www.exemple.com/getImages"+"&callback=JSON_CALLBACK";

          imagesDataPromises.push(Data.ajaxItems(url));

          Data.ajaxItems(url).then(function(response){
            if(response.pagination.next_url != undefined){
              //next_url comes inside the json it returned
              var next_url = response.pagination.next_url+"&callback=JSON_CALLBACK";
              self.getImages(userId, next_url);
            }
            else {
              return self.saveImages(imagesDataPromises)
            }
          });
        },

        saveImages: function(promisesArray) {
          var self = this;

          $q.all(promisesArray).then(function success(data){
            _.each(data, function(elem){
              //save on array only the data I want to
              imagesData.push(elem.data);
            });
            //imagesData is the array I want to return to the Controller
            return imagesData;
          });
        }
    }
}

Avoid the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572) in your `ajaxItems` method! — Bergi, Dec 12 '15 at 19:49

score 0 · Answer 1 · answered Dec 12 '15 at 18:46

What about changing the structure a bit to make sure you get a promise back from the service. Your controller code would become:

$scope.getImages = function(userId){

    //RankServices.getImages is my factory
    RankServices.getImages(userId, undefined).then(function(data){
        _.each(data, function(elem){
          //save on array only the data I want to
          imagesData.push(elem.data);
        });
    });
}

See what I mean? Have the promise in the controller! To achieve this you simply could return the $q.all call:

    saveImages: function(promisesArray) {
      var self = this;

      return $q.all(promisesArray)
    }

Resolve Multiple Promises in a Factory AngularJS

1 Answers1