web-dev-qa-db-ja.com

JSONオブジェクトをTypeScript配列に変換する方法は？

次を返す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();

      });
  }

}

私の問題は、配列のみをループできるというエラーメッセージが表示され、データがオブジェクトであるということです。 TypeScriptでオブジェクトを配列に変換し、テーブルに映画のタイトルを表示するにはどうすればよいですか？

arraysjsonangular
12
GaborH

それは正しいです、あなたの応答はフィールドを持つオブジェクトです：

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

したがって、実際にはresultsフィールドのみを反復処理する必要があります。

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

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

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

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

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

配列を含むJSONオブジェクトがあります。配列resultsにアクセスする必要があります。コードを次のように変更します。

this.data = res.json().results
3
rorschach