首页 > 解决方案 > TMDb API - 按流派 id 过滤

问题描述

我想按流派 id 过滤电影,然后将它们呈现在与其匹配的页面中。

我通过以下方式获得了流派 ID:

this.actRoute.snapshot.params['id']

路由

{path: 'genre/:id', component:GenrePageComponent}

服务

  getAllMovies(page){
    return this.http.get(`https://api.themoviedb.org/3/movie/popular?api_key=X&language=en-US&page=${page}`)
  }

响应示例:

 "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文件

  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)
    }) 
  }
}

所以“this.allmovies”包含所有电影:

在此处输入图像描述

我尝试了这样的事情,但只是收到了一个空数组:

  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)
  }

如何将 params['id'] 与电影的“genre_ids”匹配?

非常感激!

标签: angularobservablethemoviedb-api

解决方案


推荐阅读