Filter array of objects matching values from second array

Question

In my react app I have users that look like this:

{ username: 'admin', genres: [{name: 'Music', id: 1}, {name: 'Art', id: 2}] }

And videos that look like this:

{ title: 'cool video', genres: [{name: 'Music', id: 1}, {name: 'Technology', id: 3}] }

I am trying to write a function that will return an array of the video objects that contain any of the genres inside a single user. So far I have been able to hard code a solution, but it breaks if a user has the wrong number of genres, so I am looking for a neater solution. This is what I have so far:

function filterVideos() {

const userGenres = []

user.genres.forEach(genre => {
  userGenres.push(genre.name)
})

const filteredVideos = videos.filter(video => {

  return video.genres.find(o => o.name === userGenres[0])
   || video.genres.find(o => o.name === userGenres[1])
   || video.genres.find(o => o.name === userGenres[2])
})
return filteredVideos}

Does this answer your question? How filter array of objects by another array of objects [ES6] — Heretic Monkey
– Heretic Monkey, Commented Dec 9, 2020 at 17:57

Maheer Ali · Accepted Answer · 2020-12-09 17:20:34Z

4

You can use some() inside filter

const filteredVideos = videos.filter(video => user.genres.some(gen => gen.name === video.name))

const user = { username: 'admin', genres: [{name: 'Music', id: 1}, {name: 'Art', id: 2}] }
const video = { title: 'cool video', genres: [{name: 'Music', id: 1}, {name: 'Technology', id: 3}] };

const res = video.genres.filter(v => user.genres.some(g => g.name === v.name));
console.log(res)

edited Dec 9, 2020 at 17:20

answered Dec 9, 2020 at 17:18

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

5 Comments

Alexey Zelenin Over a year ago

you can use id instead of name. I think it might be better idea

Maheer Ali Over a year ago

@AlexeyZelenin Your point is valid but OP requirement is to compare name

Alan Omar Over a year ago

Are you sure about the user part?because i think he has an array of users not a single user object?

Maheer Ali Over a year ago

@AlanOmar I was also thinking of that but he didn't mentioned anything yet. I just refactored his come into simpler. Lets see how OP respond

Dec Burns Over a year ago

Thanks for the responses guys! I think id or name would have been viable, but I was looking to return the whole video object as in Pilchard's solution! (I probably didn't do a great job of explaining myself!) Really appreciate the help though! :)

pilchard · Accepted Answer · 2020-12-09 17:50:10Z

If I understand your question, you are looking to return a filtered array of complete video objects which have at least one genre in common with the passed user.

You can simplify the user's genre array to an array of genre names using a single map() call.

const userGenres = user.genres.map(({name}) => name);

It is then a matter of using Array.prototype.some() to determine if any of the video's genres are included in the userGenres array using Array.prototype.includes()

 videos.filter(video => (
    video.genres.some(({name}) => userGenres.includes(name))
  ));

const user = { 
  username: 'admin',
  genres: [{name: 'Music', id: 1}, {name: 'Art', id: 2}] }

const videos = [
  {
    title: 'video1', 
    genres: [{name: 'Music', id: 1}, {name: 'Technology', id: 3}] 
  },
  {
    title: 'video2', 
    genres: [{name: 'Art', id: 1}, {name: 'Technology', id: 3}] 
  },
  {
    title: 'video3', 
    genres: [{name: 'Sports', id: 1}, {name: 'Technology', id: 3}, , {name: 'Skiing', id: 3}] 
  }
]

function filterVideos(user, videos) {

  const userGenres = user.genres.map(({name}) => name);
  
  return videos.filter(video => (
    video.genres.some(({name}) => userGenres.includes(name))
  ));
  
}

console.log(filterVideos(user, videos));

Collectives™ on Stack Overflow

Filter array of objects matching values from second array

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related