I am using angularjs in my project.
I am able to fetch the records from Database and binding in html page.Here I need to get the data from 4 collections in database so I need to perform several server calls to get the data. When i am assigning everything in separate Scope variables. My sample code is below
var click = function(){
$http.get('/CalBuildingget').then(function (response) {
$scope.ViewBuildings = response.data;
});
for (i = 0; i < $scope.ViewBuildings.length; i++) {
$http.get('/CalBuildingFloorget/'+ scope.ViewManageBuildings[i]._id).then(function (response) {
$scope.floorDetails = response.data;
});
}
Here I need to fetch floors for each Building by its Id and store in building scope as an array object and then by floor id fetch again units which again needs to do server calls and assign inside the scope.
How can I achieve that as first it performs the loop then it starts server call of building.
You need to fetch floors in success callback of first request. So something like this.
var click = function(){
$http.get('/CalBuildingget').then(function (response) {
$scope.ViewBuildings = response.data;
for (i = 0; i < $scope.ViewBuildings.length; i++) {
$http.get('/CalBuildingFloorget/'+ scope.ViewManageBuildings[i]._id).then(function (response) {
$scope.floorDetails = response.data;
});
}
});
You'll mess up the whole performance of your application with approach you are using, are you sure that you want to send HTTP call in loop? think of a case when you have around 1000 records, shall you afford to send 1000 HTTP calls to server? instead why don't you fetch floorDetails in /CalBuildingget/ ?
Never send HTTP calls in loop, think of network bandwidth and application performance.
For multiple subsequent service calls you should always utilise promise concept. conceptually it should be like below:
function callServiceForEachItem() {
var promise;
angular.forEach(items, function(item) {
if (!promise) {
//First time through so just call the service
promise = fakeService.doSomething(item);
} else {
//Chain each subsequent request
promise = promise.then(function() {
return fakeService.doSomething(item);
});
}
});
}
use this link for best practice perform chain service call
you can check this discussion