How do I iterate over an array of objects match a common element from another array and return the key value for "name"

Question

I would like to map over an array of objects. If the id of each object matches the id from another array then I want to return the movie name.

I have seen other threads about this and have used .map and .find however for some reason my code does not return the result I want.

Find object by id in an array of JavaScript objects

const moviesNamesAndGenres = [
   {id: 28, name: "Action"},
   {id: 12, name: "Adventure"},
   {id: 14, name: "Animation"}
]

const genreIds = [14, 28, 13];


const test = genreIds.map((genreId) => {
      const matchedGenres = moviesNamesAndGenres.find((movieObj) => {
         return movieObj.id === genreId
      })
      return matchedGenres // this returns the matching objects, cool
})

At this point I have the following as two objects in the array for ids that matched.

{ id: 14, name: 'Animation' }
{ id: 28, name: 'Action' }
undefined

I would now like to return the name for each object

here is my code attempt:

const result = test.map((el) => {
  return el.name
})

console.log(result)

Now I get:

TypeError: Cannot read property 'name' of undefined

could someone help me understand why?

`13` is not in `moviesNamesAndGenres` so one of `test` variable values would be `undefined`, as you printed. so in your `test.map`, accessing `name` property of `undefined` would throw an error. You should not use map, and use something else like `reduce`, or you can filter `undefined` values before you run the last `map` — c0m1t, Jan 08 '21 at 21:41

score 1 · Accepted Answer · answered Jan 08 '21 at 21:43

1

You can first filter out elements for which no matching object was found.

const moviesNamesAndGenres = [
   {id: 28, name: "Action"},
   {id: 12, name: "Adventure"},
   {id: 14, name: "Animation"}
]

const genreIds = [14, 28, 13];


const test = genreIds.map((genreId) => {
      const matchedGenres = moviesNamesAndGenres.find((movieObj) => {
         return movieObj.id === genreId
      })
      return matchedGenres // this returns the matching objects, cool
})
const result = test.filter(Boolean).map((el) => {
  return el.name
})

console.log(result)

answered Jan 08 '21 at 21:43

Unmitigated

76,500
11
62
80

thanks for the code. So does `test.filter(Boolean)` filter out the elements in the array that are not true I'm guessing? I never knew that. Thanks! – Angela Inniss Jan 09 '21 at 12:24
1

Yes, that is what it does. – Unmitigated Jan 09 '21 at 15:38
Hello iota sorry. Let me try again I added it but it didnt work. Its probably something I am doing. It looks like what i want though as i console logged everything. I will accept shortly. Thank you! – Angela Inniss Jan 09 '21 at 22:39

score 0 · Answer 2 · answered Jan 08 '21 at 21:40

0

The error is clear. You are trying to access a property of an undefined object. There is no match between the object with id:14 and the number 13 of the Array.

answered Jan 08 '21 at 21:40

b3lg1c4

76
1
4

wasn't clear to me that's why i asked "upside down smiley face" :S – Angela Inniss Jan 08 '21 at 21:51
And that's why i tried to help you...i only trying to say that the console shows the error very clear – b3lg1c4 Jan 08 '21 at 22:38
ok thanks, sorry to snap I was just quite frustrated at the time, thanks for your help @Belgica – Angela Inniss Jan 09 '21 at 12:07

score 0 · Answer 3 · answered Jan 08 '21 at 22:37

You can use the function Array.prototype.map over the array genreIds, extract the name, and finally filter out the undefined values (those not found objects).

const moviesNamesAndGenres = [   {id: 28, name: "Action"},   {id: 12, name: "Adventure"},   {id: 14, name: "Animation"}],
      genreIds = [14, 28, 13],
      result = genreIds.map(g => (moviesNamesAndGenres.find(m => m.id === g) || {}).name).filter(Boolean);
        
console.log(result);

How do I iterate over an array of objects match a common element from another array and return the key value for "name"

3 Answers3