When using the ng-repeat to iterate through a JSON response obtained via http.get(), I encounter a situation where, inside the success() callback, I utilize a for-loop to create a new array that needs to be processed by another ng-repeat.
Here is a snippet of the code:
$http({
method: "GET",
url: "xxx",
headers: {
"Accept": "application/json;odata=verbose"
}
}).success(function (data, status, headers, config) {
$scope.onboardings = data.d.results;
var counter = {};
for (var i = 0; i < $scope.onboardings.length; i += 1) {
counter[$scope.onboardings[i].Company] = (counter[$scope.onboardings[i].Company] || 0) + 1;
}
$scope.onboardingCompanies = counter;
console.log($scope.onboardingCompanies);
})
Within the HTML part:
<div ng-repeat="item in onboardingCompanies">
<p>{{item.key}}</p>
<p>{{item.value}}</p>
</div>
Therefore, I require the ng-repeat to recognize alterations in $scope.onboardingCompanies. It appears there may be some asynchronous issue here.
Inspecting $scope.onboardingCompanies with
console.log($scope.onboardingCompanies)Object {Monjasa A/S (FRC): 35, C-bed BV: 2, Monjasa DMCC: 1, Monjasa Pte: 4, Monjasa SA: 9…}
Any guidance on how to approach this?