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}}
);
}]);
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];
});