How to filter object array in React

Question

movies = [
   {
    id:1,
    title: "movie1",
    genre:["action","sci-fi"],
    country:["usa","uk"]
   },
   {
    id:2,
    title: "movie2",
    genre:["action","comedy"],
    country:["usa","ireland"]
   },
   {
    id:3,
    title: "movie3",
    genre:["comedy","romance"],
    country:["ireland","uk]
   },
]

I want to filter movies by genre and country. I can do that in a very weird method. But I wonder what's the shortcut of filtering. Is there any option that I can filter if the prop or props exist, if not leave the original?

const Component = ({ genre, country }) => {
  const [movies,setMovies]=useState([]);
  const [filteredMovies,setFilteredMovies]=useState([])

    useEffect(()=>{
    //fetch from api and set movies
  },[])
  
  useEffect(()=>{
    setFilteredMovies(
      movies.filter((item) =>
        {
           if(genre || country){
              if(!country){
                 return item.genre.includes(genre)
              }elseif(!genre){
                 return item.country.includes(country)
              }else{
                 return item.genre.includes(genre) && item.country.includes(country)
              }
           }else return item
        }
      )
    );
  },[movies,genre,country])

  return (
    <div>
      {filteredMovies.map((item) => (
        <Movie item={item} key={item.id} />
      ))}
    </div>
  );
}

Sanket Shah · Accepted Answer · 2021-09-17 20:12:51Z

1

I recommend using lodash, its make filter simple

   _.filter(movies , { genre: ["action"] });

you can check the documentation: https://lodash.com/docs/4.17.15#filter

and please try my experiment:

edited Sep 17, 2021 at 20:12

Sanket Shah

3,1091 gold badge13 silver badges24 bronze badges

answered Sep 17, 2021 at 16:08

trysetyoutomo

3462 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emiel Zuurbier · Accepted Answer · 2021-09-17 19:03:08Z

0

Rearrange your data in a way that allows you to enter a single value or object which can be used to filter the data in the movies. For example if you'd arrange your filter like this: (which you kind of already if you wouldn't destructure)

const filters = {
  genre: 'action',
  country: 'ireland'
};

Then you could loop over each movie and use the properties of the filters to access only the properties of a movie that you would like to check, like the pseudo-code below.

movie[property].includes(value)

When doing this you can leave out, or add any filter that you'd like.

Do be aware that in the current state the snippet below assumes that it only has to work with an array.

const filters = {
  genre: 'action',
  country: 'ireland'
};
  
const movies = [
  {
    id: 1,
    title: "movie1",
    genre: ["action", "sci-fi"],
    country: ["usa", "uk"]
  },
  {
    id: 2,
    title: "movie2",
    genre: ["action", "comedy"],
    country: ["usa", "ireland"]
  },
  {
    id: 3,
    title: "movie3",
    genre: ["comedy", "romance"],
    country: ["ireland", "uk"],
  },
];

const filterMovies = (movies, filters) =>
  movies.filter(movie => 
    Object.entries(filters).every(([key, value]) => 
      movie[key].includes(value)
    )
  )

const result = filterMovies(movies, filters);
console.log(result);

edited Sep 17, 2021 at 19:03

answered Sep 17, 2021 at 16:18

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

1 Comment

Daffy Duck Over a year ago

It's a good idea to make all filters in an object. Thank you.

TR3 · Accepted Answer · 2021-09-17 16:32:00Z

0

To make this a little more ES6-y

movies.filter((item) =>{

    const [movieGenre, movieCountry] = [item.genre.includes(genre),item.country.includes(country)]

  if(movieGenre && movieCountry) true
  if(!movieGenre && !movieCountr) false

 return movieGenre ? movieGenre : movieCountry

      })

answered Sep 17, 2021 at 16:32

TR3

3874 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to filter object array in React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related