对象数组。 React.js

Question

我有一个使用The Movies DB API和React的小项目，但由于电影对象仅带有genre_id数组，因此我无法弄清楚如何获得趋势部分的类型。

    {
  "page": 1,
  "results": [
    {
      "adult": false,
      "backdrop_path": "/VuukZLgaCrho2Ar8Scl9HtV3yD.jpg",
      "genre_ids": [
        878
      ],
      "id": 335983,
      "original_language": "en",
      "original_title": "Venom",
      "overview": "Investigative journalist Eddie Brock attempts a comeback following a scandal, but accidentally becomes the host of Venom, a violent, super powerful alien symbiote. Soon, he must rely on his newfound powers to protect the world from a shadowy organization looking for a symbiote of their own.",
      "poster_path": "/2uNW4WbgBXL25BAbXGLnLqX71Sw.jpg",
      "release_date": "2018-09-28",
      "title": "Venom",
      "video": false,
      "vote_average": 6.5,
      "vote_count": 4139,
      "popularity": 154.742
    },
    {
      "adult": false,
      "backdrop_path": "/z6m7s4w4Erxnr5k2jc1TZR1AMva.jpg",
      "genre_ids": [
        53,
        18,
        878,
        27
      ],
      "id": 405774,
      "original_language": "en",
      "original_title": "Bird Box",
      "overview": "When a mysterious force decimates the world’s population, only one thing is certain: if you see it, you take your life. Facing the unknown, Malorie finds love, hope and a new beginning only for it to unravel. Now she must flee with her two children down a treacherous river to the one place left that may offer sanctuary. But to survive, they'll have to undertake the perilous two-day journey blindfolded.",
      "poster_path": "/rGfGfgL2pEPCfhIvqHXieXFn7gp.jpg",
      "release_date": "2018-12-13",
      "title": "Bird Box",
      "video": false,
      "vote_average": 7.2,
      "vote_count": 2546,
      "popularity": 184.5
    },
    {
      "adult": false,
      "backdrop_path": "/gb3TVVZNNxVGNfS1NxGaiWZfwnW.jpg",
      "genre_ids": [
        53,
        80,
        9648,
        18
      ],
      "id": 446021,
      "original_language": "en",
      "original_title": "Bad Times at the El Royale",
      "overview": "Lake Tahoe, 1969. Seven strangers, each one with a secret to bury, meet at El Royale, a decadent motel with a dark past. In the course of a fateful night, everyone will have one last shot at redemption.",
      "poster_path": "/qExufIc4Rw0e4xdVZlhMdmEDGES.jpg",
      "release_date": "2018-10-04",
      "title": "Bad Times at the El Royale",
      "video": false,
      "vote_average": 6.7,
      "vote_count": 662,
      "popularity": 77.257
    },

您可以像这样获取类型列表。

{
  "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 80,
      "name": "Crime"
    },
    {
      "id": 99,
      "name": "Documentary"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 10751,
      "name": "Family"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 36,
      "name": "History"
    },
    {
      "id": 27,
      "name": "Horror"
    },
    {
      "id": 10402,
      "name": "Music"
    },
    {
      "id": 9648,
      "name": "Mystery"
    },
    {
      "id": 10749,
      "name": "Romance"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10770,
      "name": "TV Movie"
    },
    {
      "id": 53,
      "name": "Thriller"
    },
    {
      "id": 10752,
      "name": "War"
    },
    {
      "id": 37,
      "name": "Western"
    }
  ]
}

我正在尝试通过genre_ids显示电影映射的流派，并根据每个流派ID显示流派，而不是获取每个电影的完整细节以访问genre_id.name。

因此，我必须从每个电影对象中获取流派ID，并将其与我拥有的流派列表的ID进行比较，并显示每个genre_ids的genres.name。 （可以是多个）。

Answer 1

这是Mike建议的使用映射方法的示例。 请记住，在开始访问地图之前，需要先创建该地图，我这样说是因为获取数据可能对您来说是异步操作。

在将ID映射到单个对象中的流派名称之后，我遍历每部电影，获取genre_id，然后再次遍历每个ID上调用getGenreID（）的影片，这将导致访问该映射以获取流派名称。

 const genreList = { "genres": [{ "id": 28, "name": "Action" }, { "id": 12, "name": "Adventure" }, { "id": 16, "name": "Animation" }, { "id": 35, "name": "Comedy" }, { "id": 80, "name": "Crime" }, { "id": 99, "name": "Documentary" }, { "id": 18, "name": "Drama" }, { "id": 10751, "name": "Family" }, { "id": 14, "name": "Fantasy" }, { "id": 36, "name": "History" }, { "id": 27, "name": "Horror" }, { "id": 10402, "name": "Music" }, { "id": 9648, "name": "Mystery" }, { "id": 10749, "name": "Romance" }, { "id": 878, "name": "Science Fiction" }, { "id": 10770, "name": "TV Movie" }, { "id": 53, "name": "Thriller" }, { "id": 10752, "name": "War" }, { "id": 37, "name": "Western" } ] } const movies = { "page": 1, "results": [{ "adult": false, "backdrop_path": "/VuukZLgaCrho2Ar8Scl9HtV3yD.jpg", "genre_ids": [ 878 ], "id": 335983, "title": "Venom", }, { "adult": false, "backdrop_path": "/z6m7s4w4Erxnr5k2jc1TZR1AMva.jpg", "genre_ids": [ 53, 18, 878, 27 ], "id": 405774, "original_language": "en", "original_title": "Bird Box", "title": "Bird Box" } ] } let genreMap = {}; for (let i = 0; i < genreList.genres.length; i++) { let genre = genreList.genres[i]; genreMap[genre.id] = genre.name; } function getGenreName(id) { return genreMap[id]; } for (let i = 0; i < movies.results.length; i++) { let genreIDs = movies.results[i].genre_ids; let movieTitle = movies.results[i].title; console.log(movieTitle); for (let j = 0; j < genreIDs.length; j++) { let genreID = movies.results[i].genre_ids[j]; let genreName = getGenreName(genreID); console.log(" " + genreName); } console.log("-------------"); } 

Answer 2

通过归约将您的流派预处理到地图中（数组：减少），然后遍历电影结果并按ID提取流派。

 const rawGenres = [ { "id": 28, "name": "Action" }, { "id": 12, "name": "Adventure" }, { "id": 16, "name": "Animation" }, { "id": 35, "name": "Comedy" }, { "id": 80, "name": "Crime" }, { "id": 99, "name": "Documentary" }, { "id": 18, "name": "Drama" }, { "id": 10751, "name": "Family" }, { "id": 14, "name": "Fantasy" }, { "id": 36, "name": "History" }, { "id": 27, "name": "Horror" }, { "id": 10402, "name": "Music" }, { "id": 9648, "name": "Mystery" }, { "id": 10749, "name": "Romance" }, { "id": 878, "name": "Science Fiction" }, { "id": 10770, "name": "TV Movie" }, { "id": 53, "name": "Thriller" }, { "id": 10752, "name": "War" }, { "id": 37, "name": "Western" } ]; // Use an array reduce to map genre ids to names const genres = rawGenres.reduce((genres, {id, name}) => { genres[id] = name; return genres; }, {}); console.log(genres); const rawMovies = [ { "adult": false, "backdrop_path": "/VuukZLgaCrho2Ar8Scl9HtV3yD.jpg", "genre_ids": [ 878 ], "id": 335983, "original_language": "en", "original_title": "Venom", "overview": "Investigative journalist Eddie Brock attempts a comeback following a scandal, but accidentally becomes the host of Venom, a violent, super powerful alien symbiote. Soon, he must rely on his newfound powers to protect the world from a shadowy organization looking for a symbiote of their own.", "poster_path": "/2uNW4WbgBXL25BAbXGLnLqX71Sw.jpg", "release_date": "2018-09-28", "title": "Venom", "video": false, "vote_average": 6.5, "vote_count": 4139, "popularity": 154.742 }, { "adult": false, "backdrop_path": "/z6m7s4w4Erxnr5k2jc1TZR1AMva.jpg", "genre_ids": [ 53, 18, 878, 27 ], "id": 405774, "original_language": "en", "original_title": "Bird Box", "overview": "When a mysterious force decimates the world's population, only one thing is certain: if you see it, you take your life. Facing the unknown, Malorie finds love, hope and a new beginning only for it to unravel. Now she must flee with her two children down a treacherous river to the one place left that may offer sanctuary. But to survive, they'll have to undertake the perilous two-day journey blindfolded.", "poster_path": "/rGfGfgL2pEPCfhIvqHXieXFn7gp.jpg", "release_date": "2018-12-13", "title": "Bird Box", "video": false, "vote_average": 7.2, "vote_count": 2546, "popularity": 184.5 }, { "adult": false, "backdrop_path": "/gb3TVVZNNxVGNfS1NxGaiWZfwnW.jpg", "genre_ids": [ 53, 80, 9648, 18 ], "id": 446021, "original_language": "en", "original_title": "Bad Times at the El Royale", "overview": "Lake Tahoe, 1969. Seven strangers, each one with a secret to bury, meet at El Royale, a decadent motel with a dark past. In the course of a fateful night, everyone will have one last shot at redemption.", "poster_path": "/qExufIc4Rw0e4xdVZlhMdmEDGES.jpg", "release_date": "2018-10-04", "title": "Bad Times at the El Royale", "video": false, "vote_average": 6.7, "vote_count": 662, "popularity": 77.257 } ]; // Iterate over movies, and map genres by id to names // I used foreach to demonstrate the iteration, but you could easily // use map/reduce here to mutate into what you need for react. rawMovies.forEach(movie => { const movieGenres = movie.genre_ids && movie.genre_ids.map(id => genres[id]); console.log(`${movie.title}: ${movieGenres}`); });