How to convert a JSON object to a Typescript array?

Question

I have an API request that 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 want to show the selected movie name after clicking a button 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(); }); } } 

My problem is that I get an error message that says that I can only iterate over arrays, and my data is an object. How can I convert my object to an array in typescript and show the movie name in the table?

Answer 1

That's right, your answer is an object with fields:

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

So, you really want to iterate only the results field:

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

... or even simpler:

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

Answer 2

You have a JSON object containing an array. You need to access the results array. Change your code to:

 this.data = res.json().results 

Answer 3

To convert any JSON array to an array, use the code below:

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