Angular 2でAPIコールを作成する方法は？

Question

すでに多くのリソースがありますが、私は1つの理由または別の理由で動作するものを見つけることができませんでした。一般的な例を取ってください：http://swapi.co/api/peopleからの回答を得たいです。これはスターウォーズの人々のリストになります。

import {Injectable } from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 

@Injectable() 
export class OombaDataService { 
    constructor(private http: Http) {} 
    private usersUrl = 'http://swapi.co/api/people/'; 

    getData() { 
     return this.http.get(this.usersUrl) 
     .map(this.extractData) 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body.data || { }; 
    } 
    private handleError (error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     // We'd also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
        error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 
} 

それはアンギュラ自身tutorial問題に基づいていますので、これの多くは正しいはずです。しかし、どのような理由であれ、コンポーネントで呼び出すと、JSONデータなしで観測可能なオブジェクトが返されます。私は何が欠けていますか？この方法では

Answer 1

：最初のラインで

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
} 

は、JavaScriptオブジェクトにJSONなどのAPI呼び出しの結果を解析します。 次に、そのオブジェクトのプロパティdataを返します（存在する場合）。存在しない場合は、空のオブジェクト（{ }）を返します。

事がhttp://swapi.co/api/people/のAPIがextractData()メソッドは常に空のオブジェクト（{ }）の観測可能に戻っていることを意味dataプロパティを、含まれている応答をもたらすものではありませんということです。

をそれに加えて、getData()は本当に、Observableを返すので、その値を取得するには、次のような、それに加入する必要があります。

@Component({ 
    ... 
    providers: [OombaDataService] 
}) 
export class SomeComponent { 

    constructor(oombaDataService: OombaDataService) { 
    oombaDataService.getData().subscribe(
     x => { 
      console.log("VALUE RECEIVED: ",x); 
     }, 
     x => { 
      console.log("ERROR: ",x); 
     }, 
    () => { 
      console.log("Completed"); 
     } 
    ); 
    } 

} 

そして、APIの応答はいずれも持っていないことを、言ったように、以来、 （あなたが欲しいものを見つけ出す少なくともまで）その中.dataプロパティは、extractData()は本当にする必要があります：作業物事を取得する必要があります

private extractData(res: Response) { 
    return res.json(); 
} 

。ここにはworking plunkerがあります。