Make 20 REST API calls in parallel and combined the data after all request is completed and display on screen using angularjs

Question

I am working to develop a page which display the list of 20 product details using Angularjs & nodejs. I have REST API to get the data for each product separately. This is same service I use when I launch other page where I display the details of this product.

I am looking for solution so that in the angularjs client side code, I can make 20 hits to REST API and combine the data and then use the angularjs directive to display the list of 20 products in my page.

How can i make 20 REST API call in parallel to get the data, once client gets all the data back then combine it and then display in UI.

Currently I am making call one by one and combining the data. Following is code snippet that I am using. I don't like this approach as it seems not optimal at all.

ApplicationLoaderService.initializePageCache($scope, 'product_1', 'myPage', function (response) {
    updateCache('product_1', 'myPage', response);
    ApplicationLoaderService.initializePageCache($scope, 'product_2', 'myPage', function (response) {
        updateCache('product_2', 'myPage', response);
        ApplicationLoaderService.initializePageCache($scope, 'product_3', 'myPage', function (response) {
            updateCache('product_3', 'myPage', response);
            ApplicationLoaderService.initializePageCache($scope, 'product_4', 'myPage', function (response) {
                updateCache('product_4', 'myPage', response);
                ApplicationLoaderService.initializePageCache($scope, 'product_5', 'myPage', function (response) {
                    updateCache('product_5', 'myPage', response);
                    ApplicationLoaderService.initializePageCache($scope, 'product_6', 'myPage', function (response) {
                        updateCache('product_6', 'myPage', response);
                        ApplicationLoaderService.initializePageCache($scope, 'product_7', 'myPage', function (response) {
                            updateCache('product_7', 'myPage', response);
                            ApplicationLoaderService.initializePageCache($scope, 'product_8', 'myPage', function (response) {
                                updateCache('product_8', 'myPage', response);
                                ApplicationLoaderService.initializePageCache($scope, 'product_9', 'myPage', function (response) {
                                    updateCache('product_9', 'myPage', response);
                                    ApplicationLoaderService.initializePageCache($scope, 'product_10', 'myPage', function (response) {
                                        updateCache('product_10', 'myPage', response);
                                        //invoke callback
                                        if (initilizeApplicationCacheCallback) {
                                            initilizeApplicationCacheCallback();
                                        }

                                    });

                                });

                            });

                        });

                    });

                });

            });

        });

    });
});


//initialize product page cache
initializePageCache: function ($scope, code, pageName, callback) {
    //make server call
    Product.get(function (response) {
        //invoke callback
        if (callback) {
            callback(response);
        }
    });
}

//Following is code as angular resource
app.factory('Product', ['$resource', function($resource) {
        return $resource('/products/:id', {id: '@id'}, {update: {method: 'PUT', isArray: false}}
        );
    }]);

Answer 1

What you need is $q.all

It works by stacking promises and succeeding when they're all ready. It takes an array of promises as it's parameter.

For example:

var promises  = [
  $http.get('/test'),
  $http.get('/test2')
]

$q.all(promises).then(results) {
    var testResult1 = results[1];
    var testResult2 = results[2];
});

Answer 2

This is a cool trick I often use (with jQuery):

var requests = [], count = 20;

while (count--) {
    requests.push($.ajax(...));
}

$.when.apply($, requests).then(function () {
    // all requests are done, each response is passed as an argument
    var args = Array.prototype.slice.apply(arguments)
        response, i, len;
    for (i = 0, len = args.length; i < len; i++) {
        response = args[i];
        // do something with each response here
    }
});