web-dev-qa-db-fra.com

Comment convertir un objet JSON en un tableau TypeScript?

J'ai une demande d'API qui renvoie ce qui suit:

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

Je voudrais montrer le titre du film récupéré après le clic du bouton avec le code suivant:

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();

      });
  }

}

Mon problème est que je reçois un message d'erreur qui dit que je ne peux que parcourir les tableaux, et que mes données sont un objet. Comment puis-je convertir mon objet en tableau dans TypeScript et afficher le titre du film dans la table?

arraysjsonangular
12
GaborH

C'est exact, votre réponse est un objet avec des champs:

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

Donc, vous voulez en fait itérer le champ results uniquement:

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

... ou même plus facile:

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

Pour convertir un fichier JSON en tableau, utilisez le code ci-dessous:

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

Vous avez un objet JSON qui contient un tableau. Vous devez accéder au tableau results. Changez votre code pour:

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