I have a panel on my page displaying 6 categories fetched from an API call:
var getCategories = function (customUrl) {
$http.get(customUrl).then(function success(response) {
$scope.categories = response.data;
// console.log($scope.categories);
// ****
},
function error(response) {
console.log("An error occurred in fetching categories", response)
});
};
Within this request, there is an angular.forEach loop that sends an API request for each category individually
angular.forEach($scope.categories, function (category) {
var queryString = '?categoryId=',
url = urlData + queryString;
var getArrayLength = function(url){
$http.get(url)
.then(function success(response) {
$scope.getLength = response.data;
console.log($scope.getLength)
}, function error(response) {
console.log("Error in obtaining length", response)
});
};
getArrayLength(url + category.id);
category.selected = $scope.selectedAllCat;
});
Currently, everything seems fine. The console log for $scope.getLength shows 6 different arrays and $scope.getLength.length returns the length of those arrays.
Now, I'm trying to display a table on my page like this:
<div class="panel-body">
<table class="table">
<tr>
<td class="col-md-1"><input type="checkbox"
ng-model="selectedAllCat"
ng-click="selectAllCat()"> </td>
<td class="col-md-9">All</td>
<td class="col-md-2">
{{ initialDataLength.length }}
</td>
</tr>
<tr ng-repeat="category in categories | orderBy : 'id' ">
<td class="col-md-1">
<input type="checkbox"
ng-model="category.selected"
ng-click="updateFilter(category.id)">
</td>
<td class="col-md-9">{{ category.name }}</td>
<td class="col-md-2">
{{ getLength.length }}
</td>
</tr>
</table>
This is where I'm facing an issue. How can I bind the array's length with the category name? Currently, it displays the same length for each category name. Thank you in advance.