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

通过归约（数组：reduce）将流派预处理到地图中，然后遍历电影结果并按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}`);
});

对象数组。 React.js

2 个答案: