Currently, I am utilizing the TMDB API to showcase movies along with their respective genres. In my code, I have two objects where I retrieve details for movies and genres as shown below:
listTrendingMovies() {
this.listMediaService.listTrendingMovies().subscribe((res) => {
this.trendingMovies = res['results'];
});
}
The object "results" contains an array with unique IDs for each movie, which can be found in their documentation.
To fetch and subscribe to genre data in genresList:
listGenres(){
this.listMediaService.listMovieGenres().subscribe((res) =>{
this.genresList = res['genres']
})
}
The "genres" object also includes an array with IDs corresponding to each genre, as noted in the documentation.
I have implemented a function that retrieves the name of each genre based on its ID:
findGenre(genreId){
this.genresList.forEach((obj) =>{
if (genreId == obj.id){
this.genreName = obj.name
console.log(obj.name)
}
})
}
Although I have made progress up to this point, I am facing an issue. While I am able to access specific genres using their IDs and both objects contain movie and genre information, I am struggling to link each movie displayed in my component.html (using ngFor) with its corresponding genre from the genres object.
Your assistance would be greatly appreciated!