Question 179077 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can we match IDs in Javascript arrays and create a new property if they match?

I want to compare movie[i].genre_ids with genres array and return an array of string to be pushed in each movie[i].genre_name as :
genre_name:['','',''] 

const genres =  [
    { id: 28, name: 'Action' },
    { id: 12, name: 'Adventure' },
    { id: 16, name: 'Animation' },
    { id: 35, name: 'Comedy' },
    { id: 80, name: 'Crime' },
    { id: 99, name: 'Documentary' },
    { id: 18, name: 'Drama' },
    { id: 10751, name: 'Family' },
    { id: 14, name: 'Fantasy' },
]
const movie = [  
 {
    genre_ids: [ 16, 18, 12, 14 ],
    title: 'Suzume',
 // so after comparing id's it will create a new property on each object as genre_name:
 //  ['Action',Drama,] or nothing if no ids matched .
  }     
 // x20 
]

I tried different combinations of array.map, forEach, filter but didn’t manage to find a solution .

Tags:

4

Answers


  1. 0
    1. Loop all movies
    2. Create a new property ‘genres’
    3. Map genre ids
    4. Find the correct id inside genre list
    5. Return the name
    6. (Optional) Remove ids from object
    const genres =  [
    { id: 28, name: 'Action' },
    { id: 12, name: 'Adventure' },
    { id: 16, name: 'Animation' },
    { id: 35, name: 'Comedy' },
    { id: 80, name: 'Crime' },
    { id: 99, name: 'Documentary' },
    { id: 18, name: 'Drama' },
    { id: 10751, name: 'Family' },
    { id: 14, name: 'Fantasy' },
]
const movies = [  
 {
    genre_ids: [ 16, 18, 12, 14 ],
    title: 'Suzume',
  }     
]

// 1
movies.forEach((movie) => {
// 2 + 3
movie.genres = movie.genre_ids.map(
// 4 + 5
(id)=> genres.find((genre) => id === genre.id).name
)
// 6
delete movie.genre_ids
})

console.log(movies)
    Login or Signup to reply.
  2. 0

    This is what I managed to come up with. Used a getter to access the objects own genre IDs, then used findIndex within a map and returned the object’s name property, although I will say this only handles a single movie well as you’d need to define the getter for each object, i’ve included a much tidier example of the below functionality using a class below.

    const genres =  [
    { id: 28, name: 'Action' },
    { id: 12, name: 'Adventure' },
    { id: 16, name: 'Animation' },
    { id: 35, name: 'Comedy' },
    { id: 80, name: 'Crime' },
    { id: 99, name: 'Documentary' },
    { id: 18, name: 'Drama' },
    { id: 10751, name: 'Family' },
    { id: 14, name: 'Fantasy' },
]
const movie = [  
 {
    genre_ids: [ 16, 18, 12, 14 ],
    title: 'Suzume',
    get genre_names() { 
      return this.genre_ids.map((genre_id) => {
        return genres[genres.findIndex((genre) => genre_id === genre.id)].name
      })
    }
  }     
]

console.log(movie);

    Admittedly this kind of goes far beyond the initial question but someone might find it useful, also much more reusable. Example using a class:

    const genres =  [
    { id: 28, name: 'Action' },
    { id: 12, name: 'Adventure' },
    { id: 16, name: 'Animation' },
    { id: 35, name: 'Comedy' },
    { id: 80, name: 'Crime' },
    { id: 99, name: 'Documentary' },
    { id: 18, name: 'Drama' },
    { id: 10751, name: 'Family' },
    { id: 14, name: 'Fantasy' },
]

class Movie {
  constructor(title, genre_ids){
    this.title = title;
    this.genre_ids = genre_ids;
    this.genre_names = this.set_genre_names();
  }
  
  set_genre_names() { 
    return this.genre_ids.map((genre_id) => {
      return genres[genres.findIndex((genre) => genre_id === genre.id)].name
    })
  }
}

let movies = [
 new Movie('Suzume', [ 16, 18, 12, 14 ]),
];

console.log(movies);
    Login or Signup to reply.
  3. 0

    Here’s a solution using the traditional for loop.

    const genres =  [
    { id: 28, name: 'Action' },
    { id: 12, name: 'Adventure' },
    { id: 16, name: 'Animation' },
    { id: 35, name: 'Comedy' },
    { id: 80, name: 'Crime' },
    { id: 99, name: 'Documentary' },
    { id: 18, name: 'Drama' },
    { id: 10751, name: 'Family' },
    { id: 14, name: 'Fantasy' },
];
const movies = [  
 {
    genre_ids: [ 16, 18, 12, 14 ],
    title: 'Suzume',
  }
];

function findGenre(id) {
    let result;
    for(let i=0; i<genres.length; i++) {
        if(id == genres[i].id) {
            result = genres[i].name;
            break;
        }
    }
    return result;
}

function mapGenre() {
    for(let i=0; i<movies.length; i++) {
        movies[i]['genre_names'] = [];
        for(let j=0; j<movies[i].genre_ids.length; j++) {
            let tempName = findGenre(movies[i].genre_ids[j]);
            if(tempName) {
                movies[i]['genre_names'].push(tempName);
            }
        }
    }
}

mapGenre();
console.log(movies);//your updated movies
    Login or Signup to reply.
  4. 0

    An map() with a nested filter with another map() would be enough:

    movie = movie.map(m => ({ 
    ...m, 
    genre_name: genres.filter(g => m.genre_ids.includes(g.id))
      .map(o => o.name)
}));

    Demo:

    const genres =  [
    { id: 28, name: 'Action' },
    { id: 12, name: 'Adventure' },
    { id: 16, name: 'Animation' },
    { id: 35, name: 'Comedy' },
    { id: 80, name: 'Crime' },
    { id: 99, name: 'Documentary' },
    { id: 18, name: 'Drama' },
    { id: 10751, name: 'Family' },
    { id: 14, name: 'Fantasy' },
]
let movie = [  
 {
    genre_ids: [ 16, 18, 12, 14 ],
    title: 'Suzume'
  }     
]

movie = movie.map(m => ({ 
    ...m, 
    genre_name: genres.filter(g => m.genre_ids.includes(g.id))
      .map(o => o.name)
}));

console.log(movie);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search