My goal is to combine two HTTP.get requests into one $scope in order to display the data in the same ng-repeat table. I am utilizing chained promises in my AngularJS application as shown below:
AngularJS:
function getContainer() {
$http.get("/api/containers")
.then(function (response) {
$scope.GTMcontainersAccount = response.data;
$scope.loading = false;
// Retrieve containerId and AccountID then send a request to show Counts of how many Tags, Triggers, and Variables are available in each Container
angular.forEach($scope.GTMcontainersAccount, function (key) {
angular.forEach(key, function (keydata) {
$scope.accountId = keydata.accountId;
$scope.containerId = keydata.containerId;
$http.get("/api/tags", {
params: {
"param1": $scope.accountId,
"param2": $scope.containerId
}
}).then(function (responses) {
$scope.tags_counter = responses.data[""]['tags'];
$scope.trigger_counter = responses.data[""]['trigger'];
$scope.variable_counter = responses.data[""]['variable'];
})
})
})
})
}
Explanation of the code:
1) http.get(/api/containers) retrieves data in JSON-format
2) angular.forEach iterates through the keys
3) angular.forEach iterates through the values (since keys are dynamic, there are 2 angular.forEach loops)
4) http.get(/api/tags) sends some parameters and receives result data
5) The challenge here is that I want to use ng-repeat on $scope.GTMcontainersAccount but cannot directly merge it with $scope.tags_counter, $scope.trigger_counter, and $scope.variable_counter.
The data in $scope.GTMcontainersAccount:
{
"Account2": [{
"accountId": "1746756959",
"containerId": "7454209",
}, {
"accountId": "1746756959",
"containerId": "7519183",
}],
"Account 1": [{
"accountId": "1766143525",
"containerId": "7483653",
}]
}
The data in $scope.tags_counter (trimmed for brevity):
{
"0": {
"accountId": "***",
"containerId": "*****",
"tag": [{...}],
"trigger": [{...}],
"variable": [{...}]
},
"": {
"tags": 3,
"trigger": 3,
"variable": 3
}
}
After merging, I expect $scope.GTMcontainersAccount to look like this:
{
"Account2": [{
"accountId": "1746756959",
"containerId": "7454209",
}, {
"accountId": "1746756959",
"containerId": "7519183",
}],
"Account 1": [{
"accountId": "1766143525",
"containerId": "7483653",
}],
"Counter" : {
"tags": 3,
"trigger": 3,
"variable": 3
}
UPDATED: https://i.sstatic.net/go0yb.png