angular controller array empty even though i just defined it

Question

the following is a function in an angular controller. "alert (coffee.brand)", or any other part of the array, prints "undefined," which obviously it isn't. The weird part is, undefined prints the correct number of times in the for loop, so it knows the array is populated, it just can't seem to read the data. thoughts? Thanks in advance!

$scope.activate = function(id){


            $scope.coffees =
    [
    {'id': 1,
    'brand': 'Folgers',
    'name': 'Regular',
    'country': 'America',
    'reviews': [
            {'rating': 3,
            'comment': "gross",
            'reviewer': "James"
            }
    ]
    },
    {'id': 2,
    'brand': 'Starbucks',
    'name': 'Mocha',
    'country': 'America',
    'reviews': [
    {'rating': 7,
    'comment': 'insane!',
    'reviewer': 'Bob'
    },
    {'rating': 5,
    'comment': 'solid...',
    'reviewer': 'Joe'
    }
    ]
    }
    ];

            for (coffee in $scope.coffees){                       

                    alert (coffee.brand);
                    if (coffee.id == id){
                            $scope.currCoffee = coffee;
                            alert("here")
                            alert ($scope.currCoffee.id);
                    }
            }

    };

coffee is key not the object itself, so go like `$scope.coffees[coffee]` — vinayakj, Jul 11 '15 at 18:55

score 1 · Answer 1 · answered Jul 11 '15 at 18:58

You are using the for in loop incorrectly. It does not iterate over elements in an array, but property names of an object. In your case, as you are using an implicitly numerically indexed array, it would be better to use a normal for loop, like so:

for (var i = 0; i < $scope.coffees.length; i++) {        
    var coffee = $scope.coffees[i];               
    alert (coffee.brand);
    if (coffee.id == id){
        $scope.currCoffee = coffee;
        alert("here")
        alert ($scope.currCoffee.id);
    }
}

See the documentation over at MDN for more information about the for in loop.

score 0 · Answer 2 · answered Jul 11 '15 at 18:58

0

You should update the for loop to

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

and retrieve values like

alert($scope.coffees[i].brand);

For reference - http://plnkr.co/edit/bmuJmJO94mEzGuB3uF0K?p=preview

answered Jul 11 '15 at 18:58

Nikhil Aggarwal

28,197
4
43
59

score -1 · Answer 3 · answered Jul 11 '15 at 18:56

-1

coffee is key not the object itself, so go like $scope.coffees[coffee].

For more information

for...in loop

It iterates enumerable own and enumerable inherited properties.

answered Jul 11 '15 at 18:56

vinayakj

5,591
3
28
48

why downvote.. atleast put comment so could also understand – vinayakj Jul 11 '15 at 19:17

angular controller array empty even though i just defined it

3 Answers3