如何将JSON对象转换为Typescript数组?

问题描述

我有一个API请求，该请求返回以下内容:

I have an API request which returns the following:

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

在单击按钮后，我想用以下代码显示获取的电影标题:

I would like to show the fetched movie title after the button click with the following code:

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转换为Array，并在表格中显示电影的标题?

My problem is that I get an error message which says I can only loop through Arrays, and my data is an Object.How can I convert my Object to Array in typescript, and show the title of the movie in the the table?

推荐答案

是的，您的响应是带有字段的对象:

That's correct, your response is an object with fields:

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

实际上，您实际上只想迭代results字段:

So you in fact want to iterate the results field only:

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

...甚至更简单:

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

这篇关于如何将JSON对象转换为Typescript数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！