使用 javascript 过滤 JSON 数组

Filtering JSON Array with javascript

本文关键字：数组 JSON 过滤 javascript 使用      更新时间：2023-09-26

我的目标是根据电影的评级过滤电影的JSON数组。单击单选按钮时，页面将更新，仅显示具有该分级的电影。截至目前，每次单击按钮时，它只会显示数组中的所有电影。这是我的 JSON 文件的外观示例

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

这是我的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);
 };

正如注释中所暗示的，您应该使用 filter .它很简单，功能更强大，更容易阅读正在发生的事情。您还应该将函数分离出来：

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;
}

现在您所要做的就是：

display_movies(filterByRating('G'));
相关文章：