I have the following code on the controller.js and gallery.html
.controller ('VideoGalleryController', ['$scope', 'videogalleryFactory', function($scope, videogalleryFactory){
//Values of genre searchbox
$scope.genreOptions = [
'Action',
'Adventure',
'Comedy',
'Crime',
'Drama',
'Historical',
'Horror',
'Mistery',
'Musical',
'Romance',
'Science Fiction',
'Thriller',
'Western'
];
//Get dishes from db_movies.json
videogalleryFactory.getMovies().query(
function(response) {
$scope.movies = response;
//Displays nested genres
angular.forEach($scope.movies, function(item){
console.log(item.genre);
})
},
function(response) {
$scope.message = "Error: "+response.status + " " + response.statusText;
});
}]) <div class="row row-content-cards">
<div class="col-xs-12 col-sm-9">
<!-- Title filter -->
<div class="form-group">
<label class="col-sm-3 control-label label-title" for="search">Search movie:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Search movie" ng-model="moviesfilter.title">
</div>
</div>
<!-- Genre filter -->
<div class="form-group">
<label for="genre" class="col-sm-3 control-label">Search genre</label>
<div class="col-sm-9">
<select class="form-control"
multiple
chosen
id="genre"
name="genre"
data-placeholder="Search genres"
no-results-text="'Could not find that genre'"
ng-model="???"
ng-options="s for s in genreOptions">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
<div class="container-fluid cards-row">
<div calss="hover-effect">
<div class="col-sm-6 col-md-4" ng-repeat="movie in movies | filter:moviesfilter as filtText">
<div class="hover-div">
<div class="thumbnail">
<img ng-src={{movie.cover}} alt="{{movie.alt}}" >
<div class="caption">
<h3>{{movie.title}}</h3>
<span class="badge-space badge" ng-repeat="genre in movie.genre | filter:genre"><strong>{{genre}} </strong></span>
<div class="titlewraptext">
{{movie.plot}}
</div>
<p><a href="#" class="btn btn-primary" role="button">Details</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<p ng-if="filtText.length === 0">
<strong>No results found...</strong>
<p>
</div>I want on the Filter by genre screenshot once a value is selected the whole movie to be filtered. In this example only "La momia" and "Gladiator" should be displayed.
The json file structure is the following one:
{
"movies": [
{
"title": "La momia",
"releasedate": "1998-12-31T23:00:00.000Z",
"length": 125,
"genre": [
"Adventure"
],
"plot": "Durante una batalla en Egipto, el legionario Rick O'Connell y un compañero descubren las ruinas de Hamunaptra, la ciudad de los muertos. Algún tiempo después vuelven al mismo lugar con una egiptóloga y su hermano. Allí coinciden con un grupo de estadounidenses, deseosos de correr aventuras, que acabarán provocando la resurrección de la momia de un diabólico sacerdote egipcio que intenta desesperadamente recuperar a su amada.",
"cast": "Brendan Fraser, Rachel Weisz, John Hannah, Arnold Vosloo, Jonathan Hyde, Oded Fehr, Kevin J. O'Connor, Stephen Dunham, Aharon Ipalé, Tuc Watkins, Omid Djalili, Erick Avari, Carl Chase, Corey Johnson, Bernard Fox, Patricia Velasquez, Ray Donn",
"cover": "img/film_covers/lamomia.png",
"downloaddate": "2000-02-04T23:00:00.000Z",
"alt": "La momia",
"id": 1
},
{
"title": "Los juegos del hambre",
"releasedate": "2011-12-31T23:00:00.000Z",
"length": 143,
"plot": "Lo que en el pasado fueron los Estados Unidos, ahora es una nación llamada Panem; un imponente Capitolio ejerce un control riguroso sobre los 12 distritos que lo rodean y que están aislados entre sí. Cada distrito se ve obligado a enviar anualmente un chico y una chica entre los doce y los dieciocho años para que participen en los Hunger Games, unos juegos que son transmitidos en directo por la televisión. Se trata de una lucha a muerte, en la que sólo puede haber un superviviente. Katniss Everdeen, una joven de dieciséis años, decide sustituir a su hermana en los juegos; pero para ella, que ya ha visto la muerte de cerca, la lucha por la supervivencia es su segunda naturaleza.",
"cover": "img/film_covers/losjuegosdelhambre.jpg",
"cast": "Jennifer Lawrence, Josh Hutcherson, Elizabeth Banks, Woody Harrelson, Donald Sutherland, Stanley Tucci, Liam Hemsworth, Toby Jones, Lenny Kravitz, Wes Bentley, Paula Malcomson, Isabelle Fuhrman, Sandra Ellis Lafferty, Paula Malcomson, Kimiko Gelman, Nelson Ascencio, Brooke Bundy, Amandla Stenberg, Dayo Okeniyi, Leven Rambin, Jack Quaid, Latarsha Rose, Alexander Ludwig, Jacqueline Emerson",
"downloaddate": null,
"alt": "Los juegos del hambre",
"genre": [
"Action",
"Drama",
"Science Fiction"
],
"id": 2
},
{
"title": "Gladiator",
"releasedate": "2000-04-30T22:00:00.000Z",
"length": 155,
"plot": "En el año 180, el Imperio Romano domina todo el mundo conocido. Tras una gran victoria sobre los bárbaros del norte, el anciano emperador Marco Aurelio (Richard Harris) decide transferir el poder a Máximo (Russell Crowe), bravo general de sus ejércitos y hombre de inquebrantable lealtad al imperio. Pero su hijo Cómodo (Joaquin Phoenix), que aspiraba al trono, no lo acepta y trata de asesinar a Máximo.",
"cover": "img/film_covers/gladiator.jpg",
"cast": "Russell Crowe, Joaquin Phoenix, Connie Nielsen, Oliver Reed, Richard Harris, Ralf Moeller, Derek Jacobi, Djimon Hounsou, David Schofield, John Shrapnel, Spencer Treat Clark, Tomas Arana, David Hemmings, Tommy Flanagan, Sven-Ole Thorsen, Tony Curran, Giorgio Cantarini, Omid Djalili, Giannina Facio, Michael Sheen",
"downloaddate": null,
"alt": "Gladiator",
"genre": [
"Action",
"Adventure",
"Drama",
"Historical"
],
"id": 3
}
],
"series": []
}
This'll do it.
let target_genre = 'Adventure'; // what your user selected
let movies = obj.movies; // your movies array from your JSON
// Find out if a movie's genres contains the target genre
// If so, return it to the new array.
let movies_filtered = movies.filter ( x => {
return x.genre.indexOf ( target_genre ) >= 0 } );
console.log ( movies_filtered ); // two movies
Edit: Since the actual use was an array of genres, here you can test for "any genre matches", or "all genres match". Note that the assumption now is that if it can be an array of genres, it should always be an array of genres, even if it's one long, otherwise you'll have to write "if it's an array do it this way, if not do it that way," code. If it's always an array, even one long, you just always do it the "it's an array" way.
let target_genres = [ 'Adventure', 'Drama', 'Historical' ];
let movies = obj.movies; // your movies array
// Returns if any genre matches
let movies_filtered = movies.filter ( x => {
return target_genres.filter ( y => {
return x.genre.indexOf ( y ) >= 0;
}).length; // if length is 0, that's "false", anything else is "true".
});
// Returns if all genres match
let movies_filtered = movies.filter ( x => {
let originalLength = target_genres.length;
return target_genres.filter ( y => {
return x.genre.indexOf ( y ) >= 0;
}).length === originalLength; // filtered array length must match original length
});