Question

我的JSON请求返回以下内容：

{"page": 1,
  "results": [
    {
      "poster_path": "/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg",
      "adult": false,
      "overview": "Framed in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne begins a new life at the Shawshank prison, where he puts his accounting skills to work for an amoral warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates -- including an older prisoner named Red -- for his integrity and unquenchable sense of hope.",
      "release_date": "1994-09-10",
      "genre_ids": [
        18,
        80
      ],
      "id": 278,
      "original_title": "The Shawshank Redemption",
      "original_language": "en",
      "title": "The Shawshank Redemption",
      "backdrop_path": "/xBKGJQsAIeweesB79KC89FpBrVr.jpg",
      "popularity": 5.446135,
      "vote_count": 5250,
      "video": false,
      "vote_average": 8.32
    },
    {
      "poster_path": "/lIv1QinFqz4dlp5U4lQ6HaiskOZ.jpg",
      "adult": false,
      "overview": "Under the direction of a ruthless instructor, a talented young drummer begins to pursue perfection at any cost, even his humanity.",
      "release_date": "2014-10-10",
      "genre_ids": [
        18,
        10402
      ],
      "id": 244786,
      "original_title": "Whiplash",
      "original_language": "en",
      "title": "Whiplash",
      "backdrop_path": "/6bbZ6XyvgfjhQwbplnUh1LSj1ky.jpg",
      "popularity": 9.001948,
      "vote_count": 2072,
      "video": false,
      "vote_average": 8.28
    },

我尝试在服务ID的帮助下找到ID之后的特定对象：

@Injectable()
export class MovieService {

    constructor(private http:Http) { }

    getMovies(): Promise<Movie[]>{

        return this.http.get('http://api.themoviedb.org/3/movie/top_rated?api_key=API-KEY')
            .toPromise()
            .then((res:Response) => res.json()['results'])

    }
    getMovie(id: number): Promise<Movie> {
        return this.getMovies()
            .then(movies => movies.find(movie => movie.id == id));

    }
}

上面的getMovie（）方法返回一个EXCEPTION：Uncaught（在promise中），id undefined error。如何找到所请求的对象？

Answer 1

我已经创建了一个解决问题的插件。

plunker

请注意，强烈建议使用Observables而不是Promises。

这是您服务中的两种方法。

getMovies() : Observable<any>{
    return this.http.get('./src/data.json')
}
getMovieById(id: number): Observable<any> {
    return this.getMovies().map( res =>{

      let response = res.json()['results'];

      return response.find(item => item.id === id)
    })
}

以及这里的组件

export class App {
  constructor(private movieService:MovieService) {
    this.movieService.getMovieById(278).subscribe(res => console.log(res))
  }
}

我在这里没有详细介绍Observables（许多在线资源）。如果你不熟悉它们，那么将它们视为承诺和偶数组合的结合会有很大的帮助。

每当发生某些事情时，observable会向订阅它的所有内容发出一个事件。订阅可以简单地视为forEach。

所以

this.movieService.getMovieById(278).subscribe(res => console.log(res))

可以解释为

this.movieService.getMovieById(278).forEach(res => console.log(res))

每次Observable发出一些东西时，发出的值都会传递给forEach函数。

希望这有帮助

干杯

Answer 2

我在TopmoviesDetail组件中发现了错误。我调用了getMovie（id）函数，方法如下：

 ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            let id = +params['id'];
            this.movieService.getMovie(id)
                .then(movie => this.movie = movie);

        });
    }

在模板中，我忘了添加* ngIf =＆＃34; movie＆＃34;。在我添加之后，一切都按预期工作。

@Component({

    selector: 'topmovies',
    template: ` 
    <div *ngIf="movie">// I forgot to add this line
    <h2>{{movie.id}}</h2>
    <h2>{{movie.original_title}} </h2>
    </div>

    `
})

如何借助JSON数组中的Promise参数找到一个Object？

2 个答案: