forEach object array problem angularjs

Hi all

I need help understanding the below snippet and getting it to function within my existing code.

My current project can be found here http://jsfiddle.net/umc22/4/

In total, there are 11 available genres within the arrays which should be listed in the dropdown, I only see 4 all saying [object] ?
I know the $scope.init = function() is causing the problem, if you check the link above everything should become clear.

Could anybody explain exactly what this code is doing?
function(genre, index) - what does the index mean?

$scope.init = function() {
        angular.forEach(Venues.list, function(genre, index){
            //Only add to the availableGenres array if it doesn't already exist
            var exists = false;
            angular.forEach($scope.availableGenres, function(avGenre, index){
                if (avGenre == genre) {
                    exists = true;
                }
            });
            if (exists === false) {
                $scope.availableGenres.push(genre);
            }
        });
    };

$scope.setGenreFilter = function(genre) {
        $scope.genreFilter = genre;
    };

Help much appreciated.
Still a javascript novice and learning as I go along.

thanks, cb

Anybody (:

angular.forEach(Venues.list, function(genre, index){

.list is returning four objects as below, it should be returning 11 genres?

http://jsfiddle.net/umc22/5/

[object Object]
[object Object]
[object Object]
[object Object]

Thanks, cb

angular.forEach(Venues.list, function(genre, index){

You’re iterating over the list of venues, and assigning each venue to a variable named “genre”. You’re getting [object Object] because what you think is a genre is actually a venue object. You’ll need one more forEach.

        angular.forEach(Venues.list, function([COLOR="#FF0000"]venue[/COLOR], index){
            [COLOR="#FF0000"]angular.forEach(venue.genres, function (genre, index) {[/COLOR]
                //Only add to the availableGenres array if it doesn't already exist
                var exists = false;
                angular.forEach($scope.availableGenres, function(avGenre, index){
                    if (avGenre == genre) {
                        exists = true;
                    }
                });
                if (exists === false) {
                    $scope.availableGenres.push(genre);
                }
            });
        });

Works brilliant! :cool:
Can’t thank you enough Jeff been working on this on and off 10+ days trying to understand what’s happening.

You make it look so easy :slight_smile:
Still learning javascript good learning exercise thanks.

update: http://jsfiddle.net/umc22/7/

I’ll repost if I have any further issues.

Cheers and Merry Christmas!

PS.
what exactly does … (genre, index) the index mean, what does it do?
And whats the difference between $index and index?

If you have a minute thanks.