AngularJS - Help using ng-options with object array

JavaScript
1

Hi all

I’ve been playing around with AngularJS working on a tutorial that I got working locally very well, but now, I’ve added some of my own code, some JSON without the supplied API and just can’t figure out how and what javascript I need. Been working on this for over a week… pulling my hair out :eye:

Appreciate any guidance :cool:

Please note: I’ve reduced the object list for viewing purposes.

Ng-options which populates the dropdown:


<select ng-model="genreFilter" ng-options="genre.genres for genre in venue.list">
<option value="">All</option>
</select>

The above works but lists:

<option value="0">Rock,Metal,Dubstep,Electro</option>
<option value="1">Indie,Drumstep,Dubstep,Electro</option>

I need to ignore duplicate genres and have a single list of all the available genres whether it’s one bar or hundred bars.


<option value="0">Rock</option>
<option value="1">Metal</option>
<option value="2">Indie</option>
<option value="3">Dubstep</option>
<option value="4">Electro</option>

My JS which works ok:

// Create and drop in as a service factory
barsApp.factory('Venues', function(){
    // This will return the Venues object
    var Venues = {};
    // Array of objects
    Venues.list = [
        {
            id: 0,
            name: 'Bar one',
            genres: ['Rock','Metal','Dubstep','Electro']
        },
        {
            id: 1,
            name: 'Bar Two',
            genres: ['Indie','Drumstep','Dubstep','Electro']
        }
// ....
];
    return Venues;
    
});

// Setup controller, provide venues model into our scope
function VenueCtrl($scope, Venues){
    $scope.venue = Venues;
    $scope.availableGenres = [];
    $scope.genreFilter = null;

// I think the code below needs to go here.

}

This is my problem, should give you an idea of what I’m trying to do.
I need to populate the availableGenres variable with the genre list and return it above.
This snippet was taken from the tutorial please feel free to change. Still not sure what it all means, I’ve changed to reflect my names above.

$scope.init = function() {
        angular.forEach(Venues.genres, 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;
    };

New expression returns no results

<select ng-model="genreFilter" ng-options="genre for genres in availableGenres">
<option value="">All</option>
</select>

Any suggestions?
Thank you