JSONオブジェクトをTypescript配列に変換するにはどうすればよいですか？

Question

私は次のことを返すAPIリクエストを持っている：

{"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 
    }, 

私は次のコードでボタンのクリック後にフェッチされた映画のタイトルを表示したいと思います：

import {Component} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 

@Component({ 
    selector: 'http', 
    template: ` 

<button (click)="makeRequest()">Make Request</button> 

<table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>Title</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr *ngFor="let movie of data"> 
      <td>{{movie.title}}</td> 
     </tr> 

     </tbody> 
    </table> 
` 
}) 
export class AppComponent { 

    data: Object; 

    constructor(public http: Http) { 
    } 
    makeRequest(): void { 

    this.http.request('http://api.themoviedb.org/3/movie/top_rated?api_key=API-KEY') 
     .subscribe((res: Response) => { 
     this.data = res.json(); 

     }); 
    } 

} 

私の問題は、私が取得することです配列をループするだけで、データはObjectですというエラーメッセージが表示されます。 オブジェクトをタイプスクリプトでオブジェクトに変換し、テーブルのムービーのタイトルを表示するにはどうすればよいですか？

Answer 1

、あなたの応答はフィールドを持つオブジェクトです：：へのあなたのコードが変更

{ 
    "page": 1, 
    "results": [ ... ] 
} 

ですから、実際にのみresultsフィールドを反復処理したい：

this.data = res.json()['results']; 

。 ..またはさらに簡単に：

this.data = res.json().results; 

Answer 2

配列を含むJSONオブジェクトがあります。配列resultsにアクセスする必要があります。正しいです

this.data = res.json().results 

Answer 3

任意のJSONを配列に変換するには、次のコードを使用します。

const usersJson: any[] = Array.of(res.json());