AngularJS loop variable not working as expected - angularjs

Question

The JSFiddle for this code is at http://jsfiddle.net/done_merson/x3r4o0aj/7/.
Here is the HTML:
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>
<p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}
<p ng-repeat="subsubCategory in getSubSubCategories(subCategory.name)">{{ subsubCategory.amount }}
</p>
</div>
</div>
And here is the the JS code:
angular.module("app", [])
.controller('ctrl', ['$scope',
function ($scope) {
$scope.model = {
categories: [{
"Id": 1,
name: '1'
}, {
"Id": 2,
name: '2'
}],
subCategories: [{
"parentId": 1,
name: 'a1'
}, {
"parentId": 1,
name: 'a2'
},
{
"parentId": 2,
name: 'a3'
}],
subsubcategories:[
{
"name":'a1',
"amount": 43
},
{
"name":'a1',
"amount": 21
},
{
"name":"a2",
"amount": 25
},
{
"name":"a3",
"amount": 33
},
{
"name":"a3",
"amount": 17
}
]
}
$scope.getSubCategories = function(parentId){
var result = [];
for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
if(parentId === $scope.model.subCategories[i].parentId){
result.push($scope.model.subCategories[i]);
}
}
console.log(parentId)
return result;
}
$scope.getSubSubCategories = function(name){
var subresult = [];
for(var i = 0 ; i < $scope.model.subsubcategories.length ; i++){
if(name === $scope.model.subsubcategories[i].name){
subresult.push($scope.model.subsubcategories[i]);
}
}
console.log(name)
return subresult;
}
}])
The first loop is working correctly (model.categories) but inner loop for the next loop is passing undefined for subCategory.name. Can I not pass the subCategory to the next loop? Or am I doing something wrong? What I am really trying to do is be able to create a report like you can with Access or ReportServer where you have grouping and summary of data. If anyone has any code like, I would love to see an example too.

Answer 1

Check now
angular.module("app", [])
.controller('ctrl', ['$scope',
function ($scope) {
$scope.model = {
categories: [{
"Id": 1,
name: '1'
}, {
"Id": 2,
name: '2'
}],
subCategories: [{
"parentId": 1,
name: 'a1'
}, {
"parentId": 1,
name: 'a2'
},
{
"parentId": 2,
name: 'a3'
}],
subsubcategories:[
{
"name":'a1',
"amount": 43
},
{
"name":'a1',
"amount": 21
},
{
"name":"a2",
"amount": 25
},
{
"name":"a3",
"amount": 33
},
{
"name":"a3",
"amount": 17
}
]
}
$scope.getSubCategories = function(parentId){
var result = [];
for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
if(parentId === $scope.model.subCategories[i].parentId){
result.push($scope.model.subCategories[i]);
}
}
console.log(parentId)
return result;
}
$scope.getSubSubCategories = function(name){
var subresult = [];
for(var i = 0 ; i < $scope.model.subsubcategories.length ; i++){
if(name === $scope.model.subsubcategories[i].name){
subresult.push($scope.model.subsubcategories[i]);
}
}
console.log(name)
return subresult;
}
}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>
<p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}
<span ng-repeat="subsubCategory in getSubSubCategories(subCategory.name)">{{ subsubCategory.amount }} </span>
</p>
</div>
</div>

Answer 2

You have invalid html -- change inner p to span (also add </span>) and it will work.
Errors in html doesnt always result in such tricky things, but its better to always keep it valid.