I want to filter a list of movies so it only shows the movies matching the selected genre IDs-CodePudding

I have two arrays of objects

Array 1 Movies

   [  "id": 459151,
      "original_language": "en",
      "original_title": "The Boss Baby: Family Business",
      "overview": "The Templeton brothers — Tim and his Boss Baby little bro Ted — have become adults and drifted away from each other. But a new boss baby with a cutting-edge approach and a can-do attitude is about to bring them together again … and inspire a new family business.",
      "popularity": 1484.604,
      "poster_path": "/kv2Qk9MKFFQo4WQPaYta599HkJP.jpg",
      "release_date": "2021-07-01",
      "title": "The Boss Baby: Family Business",
      "video": false,
      "vote_average": 7.8,
      "vote_count": 1323
    },
    {
      "adult": false,
      "backdrop_path": "/o0UGl6icA4DbhmDNgdZ5AWvuTtM.jpg",
      "genre_ids": [
        35
      ],
      "id": 653349,
      "original_language": "en",
      "original_title": "Vacation Friends",
      "overview": "When a straight-laced couple that has fun with a rowdy couple on vacation in Mexico return to the States, they discover that the crazy couple they met in Mexico followed them back home and decide to play tricks on them.",
      "popularity": 1403.482,
      "poster_path": "/uTgZuqUQbaCB6Wfk03N8IUEuzQf.jpg",
      "release_date": "2021-08-27",
      "title": "Vacation Friends",
      "video": false,
      "vote_average": 7.6,
      "vote_count": 162
    },
  {
    "adult": false,
    "backdrop_path": "/qnFxKwYDY7vfc3DBu3m8DzhhCfw.jpg",
    "genre_ids": [
      14
    ],
    "id": 678580,
    "original_language": "es",
    "original_title": "El mesero",
    "overview": "A waiter pretends to be an important businessman in order to reach the upper class through his entrepreneurial dreams.",
    "popularity": 1028.893,
    "poster_path": "/zvGC5jX5wQmU1GgPc0VGZz7Mtcs.jpg",
    "release_date": "2021-07-15",
    "title": "El mesero",
    "video": false,
    "vote_average": 8.5,
    "vote_count": 213
  }, ]

Array 2 Genres

[{
    "id": 28,
    "name": "Action"
  },
  {
    "id": 12,
    "name": "Adventure"
  },
  {
    "id": 16,
    "name": "Animation"
  },
  {
    "id": 35,
    "name": "Comedy"
  },]

I need to make a new array with all the movies that have the same genre_ids as the selected genres array.

Here is what I have currently using a forEach and includes array functions. I think its close but not sure. Also not getting any errors so I guess it kind of works.

const handleClick = () => {
    const newMovieList = [];
    const filteredMovies = movieList.forEach((movie) => {
      if (movie.genre_ids.includes(selectedGenres.id)) {
        newMovieList.push(movie);
      }
    });
    setMovieList(newMovieList);
    setModuleOpen("");
  };

Any help would be appreciated. Thanks

CodePudding user response：

var array1 = [
  {
    id: 459151,
    original_language: 'en',
    original_title: 'The Boss Baby: Family Business',
    overview:
      'The Templeton brothers — Tim and his Boss Baby little bro Ted — have become adults and drifted away from each other. But a new boss baby with a cutting-edge approach and a can-do attitude is about to bring them together again … and inspire a new family business.',
    popularity: 1484.604,
    poster_path: '/kv2Qk9MKFFQo4WQPaYta599HkJP.jpg',
    release_date: '2021-07-01',
    title: 'The Boss Baby: Family Business',
    video: false,
    vote_average: 7.8,
    vote_count: 1323,
  },
  {
    adult: false,
    backdrop_path: '/o0UGl6icA4DbhmDNgdZ5AWvuTtM.jpg',
    genre_ids: [35],
    id: 653349,
    original_language: 'en',
    original_title: 'Vacation Friends',
    overview:
      'When a straight-laced couple that has fun with a rowdy couple on vacation in Mexico return to the States, they discover that the crazy couple they met in Mexico followed them back home and decide to play tricks on them.',
    popularity: 1403.482,
    poster_path: '/uTgZuqUQbaCB6Wfk03N8IUEuzQf.jpg',
    release_date: '2021-08-27',
    title: 'Vacation Friends',
    video: false,
    vote_average: 7.6,
    vote_count: 162,
  },
  {
    adult: false,
    backdrop_path: '/qnFxKwYDY7vfc3DBu3m8DzhhCfw.jpg',
    genre_ids: [35],
    id: 678580,
    original_language: 'es',
    original_title: 'El mesero',
    overview:
      'A waiter pretends to be an important businessman in order to reach the upper class through his entrepreneurial dreams.',
    popularity: 1028.893,
    poster_path: '/zvGC5jX5wQmU1GgPc0VGZz7Mtcs.jpg',
    release_date: '2021-07-15',
    title: 'El mesero',
    video: false,
    vote_average: 8.5,
    vote_count: 213,
  },
];

var array2 = [
  {
    id: 28,
    name: 'Action',
  },
  {
    id: 12,
    name: 'Adventure',
  },
  {
    id: 16,
    name: 'Animation',
  },
  {
    id: 35,
    name: 'Comedy',
  },
];

const filterBYGenre = array1.filter((movie) => {
  if (movie.genre_ids) {
    return array2.some((item) => {
      return movie.genre_ids.some((id) => {
        return id === item.id;
      });
    });
  }
});

console.log(filterBYGenre);

CodePudding user response：

 const ids = Genres.map(g =>g.id)
const result = Movies.filter(m => m?.genre_ids?.filter((g)=>ids.includes(g)))

CodePudding user response：

You can efficiently achieve the result using Set

const set = new Set(genre.map((o) => o.id));
const result = movies.filter((o) => o.genre_ids?.some((id) => set.has(id)));
console.log(result);

const movies = [
  {
    id: 459151,
    original_language: "en",
    original_title: "The Boss Baby: Family Business",
    overview:
      "The Templeton brothers — Tim and his Boss Baby little bro Ted — have become adults and drifted away from each other. But a new boss baby with a cutting-edge approach and a can-do attitude is about to bring them together again … and inspire a new family business.",
    popularity: 1484.604,
    poster_path: "/kv2Qk9MKFFQo4WQPaYta599HkJP.jpg",
    release_date: "2021-07-01",
    title: "The Boss Baby: Family Business",
    video: false,
    vote_average: 7.8,
    vote_count: 1323,
  },
  {
    adult: false,
    backdrop_path: "/o0UGl6icA4DbhmDNgdZ5AWvuTtM.jpg",
    genre_ids: [35],
    id: 653349,
    original_language: "en",
    original_title: "Vacation Friends",
    overview:
      "When a straight-laced couple that has fun with a rowdy couple on vacation in Mexico return to the States, they discover that the crazy couple they met in Mexico followed them back home and decide to play tricks on them.",
    popularity: 1403.482,
    poster_path: "/uTgZuqUQbaCB6Wfk03N8IUEuzQf.jpg",
    release_date: "2021-08-27",
    title: "Vacation Friends",
    video: false,
    vote_average: 7.6,
    vote_count: 162,
  },
  {
    adult: false,
    backdrop_path: "/qnFxKwYDY7vfc3DBu3m8DzhhCfw.jpg",
    genre_ids: [35],
    id: 678580,
    original_language: "es",
    original_title: "El mesero",
    overview:
      "A waiter pretends to be an important businessman in order to reach the upper class through his entrepreneurial dreams.",
    popularity: 1028.893,
    poster_path: "/zvGC5jX5wQmU1GgPc0VGZz7Mtcs.jpg",
    release_date: "2021-07-15",
    title: "El mesero",
    video: false,
    vote_average: 8.5,
    vote_count: 213,
  },
];

const genre = [
  {
    id: 28,
    name: "Action",
  },
  {
    id: 12,
    name: "Adventure",
  },
  {
    id: 16,
    name: "Animation",
  },
  {
    id: 35,
    name: "Comedy",
  },
];

const set = new Set(genre.map((o) => o.id));
const result = movies.filter((o) => o.genre_ids?.some((id) => set.has(id)));
console.log(result);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }