I want to filter movies by their genre id and then present them in a page matching it.
I have the genre id by using:
this.actRoute.snapshot.params['id']
Routing
{path: 'genre/:id', component:GenrePageComponent}
Service
getAllMovies(page){
return this.http.get(`https://api.themoviedb.org/3/movie/popular?api_key=X&language=en-US&page=${page}`)
}
Example of response:
"results": [
{
"adult": false,
"backdrop_path": "/cjaOSjsjV6cl3uXdJqimktT880L.jpg",
"genre_ids": [
12,
14,
10751,
16
],
"id": 529203,
"original_language": "en",
"original_title": "The Croods: A New Age",
"overview": "After leaving their cave, the Croods encounter their biggest threat since leaving: another family called the Bettermans, who claim and show to be better and evolved. Grug grows suspicious of the Betterman parents, Phil and Hope, as they secretly plan to break up his daughter Eep with her loving boyfriend Guy to ensure that their daughter Dawn has a loving and smart partner to protect her.",
"popularity": 3189.651,
"poster_path": "/tK1zy5BsCt1J4OzoDicXmr0UTFH.jpg",
"release_date": "2020-11-25",
"title": "The Croods: A New Age",
"video": false,
"vote_average": 8.1,
"vote_count": 509
},
TS file
getAllMovies(){
for(let i = 1; i<=500; i++){
this.movies.push(this.moviesService.getAllMovies(i))
}
forkJoin(this.movies).subscribe((data:any[])=>{
this.allMovies = data.flat(1)
console.log("All Movies:", this.allMovies)
})
}
}
So "this.allmovies" holds all movies:
I tried something like this but just recieved an empty array:
sortCat(){
for(let i = 1; i<=500; i++){
this.movies.push(this.moviesService.getAllMovies(i))
}
forkJoin(this.movies).pipe(
map((movies:Object[])=>movies.filter(movie=>movie.results.genre_ids == this.actRoute.snapshot.params['id']))
)
.subscribe((data:any[])=>{
this.test = data
console.log("TEST:", this.test)
})
// console.log("All Movies2:", this.allMovies.results)
}
How can I match the params['id'] to "genre_ids" of the movies?
Much appreciated!