CODEWITHSUNDEEP
javascriptarraysobjectfilteres6-map
Jacob
Jacob

Reputation: 101

How to filter items from Array of Array in Javascript

How can you filter movie title on the basis of Genre item in array?

const result = [
  {
    title: "Mad Max: Fury Road",
    genre: ["Action", "Adventure", "Sci-Fi"],
  },
  {
    title: "The Hunger Games: Mockingjay Part 1",
    genre: ["Adventure", "Thriller"],
  },
  {
    title: "Jurassic World",
    genre: ["Action", "Adventure", "Sci-Fi"],
  },
  {
    title: "Everest",
    genre: ["Drama", "Thriller"],
  },
  {
    title: "Insurgent",
    genre: ["Adventure"],
  },
  {
    title: "Sicario",
    genre: ["Action", "Crime", "Drama"],
  },
];

Suppose if I want to filter movie title name on the basis of genre eg: "Sci-Fi" then it should return array of movie titles eg: ["Mad Max: Fury Road", "Jurassic World"].

Tried various combinations of map and filter but not working.

const newResult = result
  .map((curr) => curr.genre.filter((ele) => ele === search))
  .filter((ele) => ele);

Upvotes: 0

Views: 357

Answers (3)

PeterKA
PeterKA

Reputation: 24638

Use Array#filter to select the relevant items that meet the set criteria and use Array#map to select the properties of the selected items that you're interested in.

const result= [ { "title": "Mad Max: Fury Road", "genre": [ "Action", "Adventure", "Sci-Fi" ] }, { "title": "The Hunger Games: Mockingjay Part 1", "genre": [ "Adventure", "Thriller" ] }, { "title": "Jurassic World", "genre": [ "Action", "Adventure", "Sci-Fi" ] }, { "title": "Everest", "genre": [ "Drama", "Thriller" ] }, { "title": "Insurgent", "genre": [ "Adventure" ] }, { "title": "Sicario", "genre": [ "Action", "Crime", "Drama" ] } ],
  
      search = "Sci-Fi";

      newResult = result
      //which items meet the set criteria?
      .filter(({genre}) => genre.includes(search))
      //what about those items am I zeroing in on?
      .map(({title}) => title);

console.log( newResult );

Upvotes: 1

Swiffy
Swiffy

Reputation: 4683

We use filter to return all movies that pass some condition.

For the passing condition of filter, we use every on the supplied array of genres.

every returns true if all of the elements in the array (genreList) it was called on return true for some condition.

For the condition of every, we check that the movie's genre array includes the entry in the given genreList array.

So in english, this code says "Please give me all movies that have all of the genres given in genreList".

const result= [
    {
      "title": "Mad Max: Fury Road",
      "genre": [
        "Action",
        "Adventure",
        "Sci-Fi"
      ]
    },
    {
      "title": "The Hunger Games: Mockingjay Part 1",
      "genre": [
        "Adventure",
        "Thriller"
      ]
    },
    {
      "title": "Jurassic World",
      "genre": [
        "Action",
        "Adventure",
        "Sci-Fi"
      ]
    },
    {
      "title": "Everest",
      "genre": [
        "Drama",
        "Thriller"
      ]
    },
    {
      "title": "Insurgent",
      "genre": [
        "Adventure"
      ]
    },
    {
      "title": "Sicario",
      "genre": [
        "Action",
        "Crime",
        "Drama"
      ]
    }
  ];
  
const moviesByGenres = (moviesList, genreList) => {
  return moviesList.filter((m) => {
    return genreList.every((g) => m.genre.includes(g));
  });
}

// All action movies
console.log(moviesByGenres(result, ["Action"]));

// All action+adventure movies
console.log(moviesByGenres(result, ["Action", "Adventure"]));

Upvotes: 2

Jacob
Jacob

Reputation: 101

Found the answer after trial and error

const n = result.filter((curr) => curr['genre'].includes("Action"))

Upvotes: 0

Related Questions