Angular JS Looping through a multidimensional array in the controller

Question

Currently I have my scope set out in the following format.

   $scope.test = [
    {
        group: 'Group1',
        groupID:0,
        items: [
            {id: 0, description: 'Item 1', error: true, groupID:0},
            {id: 1, description: 'Item 2', error: true, groupID:0},
            {id: 2, description: 'Item 3', error: true, groupID:0},
            {id: 3, description: 'Item 4', error: true, groupID:0}
        ]
    },
    {
        group: 'Group2',
        groupID:1,
        items: [
            {id: 0, description: 'Item 1', error: true, groupID:1},
            {id: 1, description: 'Item 2', error: true, groupID:1},
            {id: 2, description: 'Item 3', error: true, groupID:1},
            {id: 3, description: 'Item 4', error: true, groupID:1}
        ]        
    },
    {
        group: 'Group3',
        groupID:2,
        items: [
            {id: 0, description: 'Item 1', error: true, groupID:2},
            {id: 1, description: 'Item 2', error: true, groupID:2},
            {id: 2, description: 'Item 3', error: true, groupID:2},
            {id: 3, description: 'Item 4', error: true, groupID:2}
        ]        
    }

What I want is too loop through all the item objects in each parent object inside the controller and get a total of all items which the value 'error' is equal to true and alert this total.

Currently inside the controller I can only loop through the 1st level objects in the array, so can only access 'group' and 'groupID'.

ankova · Accepted Answer · 2014-12-08 22:47:19Z

function myCtrl($scope) {
    $scope.test = [{
        group: 'Group1',
        groupID: 0,
        items: [{
            id: 0,
            description: 'Item 1',
            error: true,
            groupID: 0
        }, {
            id: 1,
            description: 'Item 2',
            error: true,
            groupID: 0
        }, {
            id: 2,
            description: 'Item 3',
            error: true,
            groupID: 0
        }, {
            id: 3,
            description: 'Item 4',
            error: true,
            groupID: 0
        }]
    }, {
        group: 'Group2',
        groupID: 1,
        items: [{
            id: 0,
            description: 'Item 1',
            error: true,
            groupID: 1
        }, {
            id: 1,
            description: 'Item 2',
            error: true,
            groupID: 1
        }, {
            id: 2,
            description: 'Item 3',
            error: true,
            groupID: 1
        }, {
            id: 3,
            description: 'Item 4',
            error: true,
            groupID: 1
        }]
    }, {
        group: 'Group3',
        groupID: 2,
        items: [{
            id: 0,
            description: 'Item 1',
            error: true,
            groupID: 2
        }, {
            id: 1,
            description: 'Item 2',
            error: true,
            groupID: 2
        }, {
            id: 2,
            description: 'Item 3',
            error: true,
            groupID: 2
        }, {
            id: 3,
            description: 'Item 4',
            error: false,
            groupID: 2
        }]
    }];
    $scope.errors = [];


    function innerLoop(obj) {
        return function (items) {
            for (var i = 0; i < items.length; i++) {
                if (items[i].error) {
                    $scope.errors.push(items[i].error);
                }
            }
        }(obj.items);
    }

    function loop(obj) {
        for (var i = 0; i < obj.length; i++) {
            innerLoop(obj[i]);
        }
        return $scope.errors;
    }

    loop($scope.test);
    alert($scope.errors.length);
}

A.B · Accepted Answer · 2014-12-08 16:46:31Z

0

You can use nested ng-repeat in view

see example

function myCtrl($scope){
$scope.multi = [1,2,[3,4,5]] ;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-app ng-controller="myCtrl">
<div ng-repeat='i in multi'>
  <span ng-hide="i.length>1">{{i}}</span>
  <div ng-repeat='i2 in i'>
  {{i2}}
  </div>
  
  </div>

answered Dec 8, 2014 at 16:46

A.B

20.5k3 gold badges43 silver badges74 bronze badges

2 Comments

Joe Over a year ago

Thanks for the answer, but I want one value returned which is the total, in my example I would expect 12 as 12 'error' values are true.

A.B Over a year ago

you dont want ui? just js?

Collectives™ on Stack Overflow

Angular JS Looping through a multidimensional array in the controller

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related