Angular http call within an http call - angularjs

Question

I set up a function in my service to return a list of servers/hosts that are related to a certain application. For front end purposes I have been trying to assign the host a color depending on how many services on that host are running okay/warning/critical. To implement this I am first doing an api call to get all the hosts related to that application and then I loop through the returned hostlist and do another api call to get services.
My issue is that they are resolving in the correct order so my Data2 variable is returning "undefined". How do I get it to resolve within the first for loop so I can assign a status color to each host?
Is there a better way to implement this?
Here is the function I have defined in my service.
// Function to get Servers and all their information **********************************
service.getHosts = function(AppName){
var HostList = [];
//intial http call to get the correct hostlist associated with the selected application ************
var promise = $http.get('http://localhost:9000/App/' + AppName);
promise.then(function(response){
var Data = response.data.recordset;
//Looping through each host is the recordset to push them into the HostList[] **********************
for (i = 0; i <= Data.length -1; i++){
//variables for the loop
var StatusColor = '';
var StatusTextColor = '';
var count = 0;
//another http call to get the services for each host in the Hostlist ******************************
$http.get('http://localhost:9000/Service/' + Data[i].HostName)
.then(function(response){
var Data2 = response.recordset;
//looping through the services to see if any of the services have status other than ok (shortstatus != 0) ********
for(i = 0; i<= Data2.length-1; i++){
if(Data2[i].ShortStatus != 0){
count = count + 1;
}
}
//Assigning the status color for each host depending on how many services are not ok (either warning or critical) *************
if (count == 0){
StatusColor ='rgb(255,152,0)';
StatusTextColor = 'black';
}else if (count == 1){
StatusColor ='rgb(255,152,0)';
StatusTextColor = 'white';
}else{
StatusColor = 'rgb(244,67,54)';
StatusTextColor = 'white';
}
//Pushing host information and status color to the HostList **********************
HostList.push({
"address":Data[i].Address,
"hostname":Data[i].HostName.split('.')[0],
"fullhostname":Data[i].HostName,
"statuscolor":StatusColor,
// "textcolor":'black'
})
});
}
})
return HostList;
};
Any help is greatly appreciated or any suggests of a simpler or more elegant way would be awesome.

Answer 1

Use $q.all and promise chaining
service.getHosts = function (AppName) {
//returns a http promise
return $http.get('http://localhost:9000/App/' + AppName)
.then(function (response) {
var Data = response.data.recordset;
//makes an array of $http promises
var promises = Data.map(function (dt) {
return $http.get('http://localhost:9000/Service/' + dt.HostName)
});
//executes all the promises in the array simultaneously and returns a single promise object
//whose result(response.data) will be an array of all the responses from the promises in the array
return $q.all(promises);
})
};
//Call the service method
service.getHosts("app_name_here")
.then(function(response){
//response.data will have an array of responses for all the inner $http.get calls
//you wont still be able to return the data because everything is asynchronous
//Populate your data in the $scope here after data massaging
})

Answer 2

Promises can be chained by using a return statement:
$http.get(url).then(function(response) {
return $http.get(url2);
}).then(function(response2) {
return $http.get(url3);
}).then(function(response3) {
//...
});
For more information, see
AngularJS $q Service API Reference - Chaining Promises
You're Missing the Point of Promises