AngularJS : Multiple calls to a service function returning separate promises

Question

Ok, this is a re-posting of a previous question which I'd confused by over-simplifying the code...

I have an angularjs factory function which queries a parse database, and returns a promise ... so far, pretty simple... however, my controller has a foreach loop which calls the function for each of a range of ids, which are meant to then resolve concurrently. The resolve doesn't work, however, and what I get back appears to be a garbled mixture of the api calls.

Here's a simplified version of my code...

app.factory('MyFactory', function($http, $q ) {
  return {
    testFunction: function (ingredientList) {

      var deferred = $q.defer()

      ingredientIndex=-1

      var regulariseIngredient=function() {

        ingredientIndex++

        if (ingredientIndex>ingredientList.length-1) {
          deferred.resolve(ingredientList);
          return
        }

        (new Parse.Query("Ingredient"))
        .equalTo("type", ingredientList[ingredientIndex].type)
        .equalTo("name", ingredientList[ingredientIndex].name)
        .include("parent")
        .find().then(function(result) {
          result=result[0]
          if(result.get("parent")) result=result.get("parent")                        
          ingredientList[ingredientIndex]=result
          regulariseIngredient();
         })                               

       }
       regulariseIngredient()
       return deferred.promise
    }
  }
}

app.controller('TestController', function($scope,MyFactory) {
  recipes = [ An array of objects, each with an ingredients array]
  angular.forEach(recipes, function(recipe) { 
    MyFactory.testFunction(recipe.ingredients).then(function(result) {
      console.log(result)
    })
  })
} 

Bit more info on what the service actually does...

my app has a collection of recipes, and a collection of ingredients. Each ingredient has a 'parent' which substitutes it in the 'rationalised' version. The test function loops through each ingredient, compiles the outcome and then returns a collection of substituted ingredients. The controller is looping through the recipes, so that I can check the ingredients on hand of all recipes.

Answer 1

@MarkPeace, it appears that you have hit on the anti-pattern "outlawed" here under the heading "The Collection Kerfuffle".

The espoused pattern (for performing an asynchronous task, in parallel, on each member of an array of items) is :

function workMyCollection(arr) {
    return q.all(arr.map(function(item) {
        return doSomethingAsync(item);
    }));
}

In your case, doSomethingAsync() is (new Parse.Query("Ingredient"))...find();

In full, the code will be something like :

app.factory('MyFactory', function($http, $q) {
    return {
        testFunction: function (ingredientList) {
            return $q.all(ingredientList.map(function(item) {
                return (new Parse.Query("Ingredient"))
                    .equalTo("type", item.type)
                    .equalTo("name", item.name)
                    .include("parent")
                    .find().then(function(result) {
                        return result[0].get("parent") || result[0];//phew, that's a bit more concise
                    });
            }));
        }
    }
}); 

testFunction() will thus return a promise of an array of results (whatever they happen to be).

In the controller, you can use the same pattern again to loop through the recipes :

app.controller('TestController', function($scope, MyFactory) {
    var recipes = [ An array of objects, each with an ingredients array ];
    $q.all(recipes.map(function(recipe) {
        return MyFactory.testFunction(recipe.ingredients).then(function(results) {
            console.dir(results);
            return results;
        });
    })).then(function(arr) {
        //all done-and-dusted
        //If everything has been successful, arr is an array of arrays of results
        //Do awesome stuff with the data.
    })['catch'](function(err) {
        //report/handle error here
    });
});

Of course, exactly how much you do in the controller and how much in the factory (or factories) is up to you. Personally, I would choose to keep the controller somewhat simpler.

Answer 2

Using $q.all() which takes an array of promises as argument and returns a new promise which is:

• resolved if all promises of the array are resolved
• rejected if any of the promise of the array is rejected

from the doc:

Returns a single promise that will be resolved with an array/hash of values, each value corresponding to the promise at the same index/key in the promises array/hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.

For the loop, using Array.forEach is cleaner:

testFunction:     function (ingredientList) {
    var promiseArray = [];

    ingredientList.forEach(function (ingredient) {
        var promise = (new Parse.Query("Ingredient"))
                .equalTo("type", ingredient.type)
                .equalTo("name", ingredient.name)
                .include("parent")
                .find().then(function(result) {
                    result = result[0]
                    if(result.get("parent")) {
                        result = result.get("parent");
                    }
                    return result;
                });
        promiseArray.push(promise);
    });

    return $q.all(promiseArray);
}