Блог

У меня есть массив объектов, взятых из API (https://developers.themoviedb.org/3/getting-started/introduction этот), который связан с переменной, которая является значением v-model an input . Поэтому всякий раз, когда переменная изменяется, массив тоже меняется с помощью функции, которая вызывает API, когда @keyup . У него такая структура:

 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: we]
0:
backdrop_path: "/pLG4ihU1d2XkQbASQDjsFu9U7d9.jpg"
first_air_date: "2021-03-24"
genre_ids: Array(3)
0: 18
1: 80
2: 9648
length: 3
__ob__: we {value: Array(3), dep: ce, vmCount: 0}
__proto__: Array
id: 120168
media_type: "tv"
name: "Che fine ha fatto Sara?"
origin_country: Array(1)
original_language: "es"
original_name: "¿Quién mató a Sara?"
overview: "Determinato a vendicarsi e a provare di essere stato incastrato per l'omicidio della sorella, Álex cerca di scoprire molto più del vero colpevole del crimine."
popularity: 529.698
poster_path: "/jnit57q25N5VvVrK4pj4Uj8BLe7.jpg"
vote_average: 7.8
vote_count: 430
 

Этот массив предоставляет мне полезную информацию о фильмах и сериалах, но он не возвращает мне жанры, по крайней мере, их названия, но идентификаторы, связанные с ними, да.
Теперь я вызвал другой API, который предоставляет список жанров, подобный этому:

 (19) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
id: 28
name: "Azione"
__proto__: Object
1:
id: 12
name: "Avventura"
__proto__: Object
2: {id: 16, name: "Animazione"}
3: {id: 35, name: "Commedia"}
4: {id: 80, name: "Crime"}
5: {id: 99, name: "Documentario"}
6: {id: 18, name: "Dramma"}
7: {id: 10751, name: "Famiglia"}
8: {id: 14, name: "Fantasy"}
9: {id: 36, name: "Storia"}
10: {id: 27, name: "Horror"}
11: {id: 10402, name: "Musica"}
12: {id: 9648, name: "Mistero"}
13: {id: 10749, name: "Romance"}
14: {id: 878, name: "Fantascienza"}
15: {id: 10770, name: "televisione film"}
16: {id: 53, name: "Thriller"}
17: {id: 10752, name: "Guerra"}
18: {id: 37, name: "Western"}
length: 19
__proto__: Array(0)
 

Внутри этого массива каждый объект имеет одинаковые идентификаторы жанров предыдущего массива внутри genre-ids поддерева. Поэтому, по моей логике, если идентификатор жанра внутри этого подмассива равен одному из этих идентификаторов в этом массиве списков жанров, он также принимает название жанра. Я работаю с Vue 2.
Как я могу сравнить оба массива, проверить, совпадают ли идентификаторы жанров первого массива с идентификаторами, включенными во второй массив, а затем добавить в объект первого массива имена жанров, чтобы я мог распечатать их в HTML?

Вот возможное и краткое решение, которое даст вам представление:

 const movies = [{genre_ids: [1,2]}, {genre_ids: [2]}, {genre_ids: [1,3]}];
const genres = [{id: 1, name: "genre1"}, {id: 2, name: "genre2"}, {id: 3, name: "genre3"}];
const moviesWithGenres = movies.map(movie => ({
    ...movie,
    genres: genres.filter(({ id }) => movie.genre_ids.includes(id))
  }));