Filtering JSON Array with javascript

Question

My goal is to filter through a JSON array of movies based on their rating. When a radio button is clicked, the page updates showing only the movies with that rating. As of now, every time a button is clicked, it just displays all of the movies in the array. Here is an example of what my JSON file looks like

"movies": {
    "movie": [
      {
        "title": "Aladdin",
        "rating": "G",
        "release date": "11-25-1992",
        "poster": "https://image.tmdb.org/t/p/w185/qsHpmqekgeQKMKL8PWnFsrXTXGs.jpg"
      },

Here is my JS:

 var moviesObj = loadJSON("movies.JSON");
 var movies = moviesObj.movies;


 var movies = movies.movie;

 function filter_movies(rating) {
   var array = [];

   for (var i = 0; i < movies.length; i++) {
     var title = movies[i].title;
     var rating = movies[i].rating;
     var release_date = movies[i]["release date"];
     var poster = movies[i].poster;

     if (movies.rating === rating) {
       array.push(rating);
     }
     console.log(array);
   }

   function display_movies(movies) {
     var moviegrid = "";
     for (var i = 0; i < movies.length; i++) {
       //retrieve movie details and store them in variables to be displayed

       title = movies[i].title;
       rating = movies[i].rating;
       release_date = movies[i]["release date"];
       poster = movies[i].poster;

       //start a new row in the grid
       if (i % 6 == 0) {
         moviegrid += "<div class='row'>";
       };
       //display a movie inside a div block
       moviegrid += "<div class='col'><p><img src='" + poster + "'><span>" + title + "<br>Rated " +
         rating + "<br>" + release_date + "</span></p></div>";

       //close the row in the grid
       if (i % 6 == 5) {
         moviegrid += "</div>";
       };
     };
     //display movies in a div block with the id "moviegrid".
     document.getElementById('moviegrid').innerHTML = moviegrid;
   };
   display_movies(movies);

 };

Have you tried array.prototype.filter? http://stackoverflow.com/a/2722213 — Robert Harvey, Feb 11 '16 at 17:48

score 2 · Accepted Answer · answered Feb 11 '16 at 18:21

As hinted in comments, you should use filter. It's simple, more functional, and easier to read what is going on. You should also separate out your functions a little more:

function filterByRating(rating) {
    return moviesObj.movies.movie.filter(function (movie) {
        return (movie.rating == rating);
    });
}

function display_movies(movies) {
    var moviegrid = "";
    for (var i = 0; i < movies.length; i++) {
        //retrieve movie details and store them in variables to be displayed

        //start a new row in the grid
        if (i % 6 == 0) {
            moviegrid += "<div class='row'>";
        };
        //display a movie inside a div block
        moviegrid += "<div class='col'><p><img src='" + movies[i].poster + "'><span>" + movies[i].title + "<br>Rated " +
                movies[i].rating + "<br>" + movies[i]["release date"] + "</span></p></div>";

        //close the row in the grid
        if (i % 6 == 5) {
            moviegrid += "</div>";
        }
    }
    //display movies in a div block with the id "moviegrid".
    document.getElementById('moviegrid').innerHTML = moviegrid;
}

Now all you have to do is:

display_movies(filterByRating('G'));

Filtering JSON Array with javascript

1 Answers1