Pass multiple promises to $q.all not working.

Question

I am trying to loop through an object and then pulling in data for each iteration from two service API functions which will then return data and populate my current iteration object with the results that are returned. Now, as these service functions are using the $http object, promises are returned and therefore I need to wait for the response in order to populate my object.

It is my first time using the $q AngularJS library and I am not sure whether I am able to use it in the manner I am using it. It us not returning correctly so I assume I am not and I can't seem to get my code working.

Here is my code:

Controller function

$scope.returnTasksAndPayments = function() {
var defer = $q.defer();
var promisesTasks = [];
    var promisesPayments = [];
    for(var i in $scope.projects) {
        promisesTasks[i] = ProjectService.fetchTaskData($scope.projects[i].project_id);
                    promisesPayments[i] = ProjectService.fetchPaymentsData($scope.projects[i].project_id);
                }

                $q.all(promisesTasks, promisesPayments).then(function(promiseArray) {
                        console.log(promiseArray);
                });
            };

and my service functions:

this.fetchProjectsData = function(options) {
                return api().get("http://dashboards.blurgroup.dev/src/projectPayments/services/JSONdata.json", {
                    order     : options.order,
                    page      : options.page,
                    page_size : options.page_size,
                    status    : options.status,
                    search    : options.search,
                    assigned  : options.assigned
                });
            };

            this.fetchTaskData = function(options) {
                return api().get("http://dashboards.blurgroup.dev/src/projectPayments/services/JSONdataTasks.json", {

                });
            };

            this.fetchPaymentsData = function(options) {
                return api().get("http://dashboards.blurgroup.dev/src/projectPayments/services/JSONdataPayments.json", {

                });
            };

As you can see, I am trying to loop through my $scope.projects object, calling the two functions for each iteration and putting them into separate promise object and then using $q.all to check these two promise objects are fulfilled.

This doesn't seem to be working as it should and it seems the data stored in the 'promisesPayments' array in the $q.all function is not being added to the promiseArray variable in the $q.all callback array.

Can anyone point me out as to where I am going wrong? Thanks

Answer 1

Try this:

var promisesTasksAll = $q.all(promisesTasks);
var promisesPaymentsAll = $q.all(promisesPayments);

$q.all([promisesTasksAll, promisesPaymentsAll]).then(function(data){
    //data[0] will contain promisesTasks data
    //data[1] will contain promisesPayments data    
});

Answer 2

Try concatenating your two array together into one big array and pass that to $q.all() .

Or if you need to seperate the data that is coming back, nest your resolves,

$q.all(promisesTasks).then(function(promiseTaskData) {
    console.log(promiseTaskData);
    $q.all(promisesPayments).then(function(promisePaymentsArray) {
        console.log(promisePaymentsArray);
    });
});

$q.all(promisesTasks, promisesPayments) is a nested array [[],[]] , which $q.all() doesn't like