AngularJS loop variable not working as expected

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.

Khalil · Accepted Answer · 2021-07-24 20:45:18Z

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>

Petr Averyanov · Accepted Answer · 2021-07-24 01:34:43Z

0

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.

answered Jul 24, 2021 at 1:34

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

AngularJS loop variable not working as expected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related