How to iterate through angular $scope variables with a for loop

Question

I want to iterate through an array using for loop instead of using foreach in which i m not able to break the loop. But here in for loop i getting $scope.items[i] as undefined! here i m dynamically adding values in the array based upon the condition.

$scope.items= [{
        name: 'abhishek',
        credit: 1233,
        debit: 0,
        balance: 12
}];
for (var i = 1; i <= $scope.items.length; i++) {
        console.log($scope.items.length);
        if ($scope.selectedName.value === $scope.items[i].name) {
            console.log($scope.items[i].name + "forif" + true);
            break;
        }
        else {
            console.log($scope.items[i].name + "forelse " + false);               
            break;                
        }
}

you want to iterate over $scope.items or $scope.ledger ? Because $scope.ledger is not defined in your piece of code — Valentin Coudert
– Valentin Coudert, Commented Feb 2, 2017 at 19:27
and it's still not working ? (consider starting at 0 instead of 1, and till < $scope.items.length since $scope.items[$scope.items.length] would be out of bounds.) — Valentin Coudert
– Valentin Coudert, Commented Feb 2, 2017 at 19:31
Several things as pointed out by other users. Start i = 0for your for loop, your $scope.items only has 1 object in its array, so there is nothing in the $scope.items[1] and your console.log($scope.items[i].name will be undefined because again - there is nothing at index 1 — MannfromReno
– MannfromReno, Commented Feb 2, 2017 at 19:39
Please see my answer, I think it might be what you are looking for. — Maciej Caputa
– Maciej Caputa, Commented Feb 2, 2017 at 19:55

Daniel · Accepted Answer · 2017-02-03 05:45:21Z

2

This happens because you're starting your for loop at index 1. Arrays are 0-indexed in Javascript, so change i = 1 to i = 0 and you should be able to access the object(s) in your array.

Because of this your for loop should check if the index is less than the length of the array by using the less than (<) operator instead of (<=).

Source: MDN

JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1.

This code works fine (I don't know how you're setting your selectedName, but I just hardcoded it in my example:

$scope.selectedName = {value: 'abhishek'};

$scope.items= [{
        name: 'abhishek',
        credit: 1233,
        debit: 0,
        balance: 12
}];

for (var i = 0; i <= $scope.items.length; i++) {
        console.log($scope.items.length);
        if ($scope.selectedName.value === $scope.items[i].name) {
            console.log($scope.items[i].name + "forif" + true);
            break;
        }
        else {
            console.log($scope.items[i].name + "forelse " + false);               
            break;                
        }
}
}

edited Feb 3, 2017 at 5:45

answered Feb 2, 2017 at 19:24

Daniel

11.3k12 gold badges56 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Abhishek Jain Over a year ago

Yes u are right but even if i do so i m getting the error as $scope.items[i] as undefined

Mihai Alexandru-Ionut Over a year ago

@abhishek, You have to change i <= $scope.ledger.length to i < $scope.ledger.length

Daniel Over a year ago

I think you're mixing $scope.ledger and $scope.items perhaps?

Abhishek Jain Over a year ago

but I dont want to compare from the first index i.e 0 after adding two rows i applying this condition and then i m getting this error($scope.items[i] is undefined) @Alexandru-IonutMihai

Abhishek Jain Over a year ago

yes ur code is working fine but i m still getting error. this is my code plnkr.co/edit/BVyXPI16D0ro6Hm2coJI?p=preview @Daniel

|

Maciej Caputa · Accepted Answer · 2017-02-02 19:53:02Z

1

You are iterating over an array of objects therefore you need to loop through the properties of the objects inside an inner loop

We also want to avoid using for in loop hence the use of Object.keys().

for (let item of $scope.items)
    for (let key of Object.keys(item))
        console.log(key, '->', item[key])

would display

    name -> abhishek
    credit -> 1233
    debit -> 0
    balance -> 12

answered Feb 2, 2017 at 19:53

Maciej Caputa

1,91114 silver badges23 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2017-02-03 08:37:05Z

Some observations :

You are getting error because $scope.selectedName is not defined in your code.
You are trying to access $scope.items[i].name where value of i is assigned to 1 initially in the for loop. Hence, $scope.items[1] is not exist.

You have to change your for loop logic.

Use this :

for (var i = 0; i < $scope.items.length; i++) { ... }

Instead of :

for (var i = 1; i <= $scope.items.length; i++) { ... }

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.items= [{
        name: 'abhishek',
        credit: 1233,
        debit: 0,
        balance: 12
    }];
    $scope.selectedName= {
        value: 'abhishek'
    };
    for (var i = 0; i < $scope.items.length; i++) {
        console.log($scope.items.length);
        if ($scope.selectedName.value === $scope.items[i].name) {
            console.log($scope.items[i].name + "forif" + true);
            break;
        }
        else {
            console.log($scope.items[i].name + "forelse " + false);
            break;                
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
</div>

Collectives™ on Stack Overflow

How to iterate through angular $scope variables with a for loop

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related