エラーが返されていますが、リクエストデータは正常に返されます。

Question

リアクティブエクステンション（rx）のObservable Subscribe演算子でエラーが発生し、その理由が表示されません。私が行ったチュートリアルの同じコードは正常に動作しているようですが、何らかの理由で実際のAPIでエラーが発生しています。

getChannelVideos(channelId: string): Observable<any>{ 
    var url = `${this._baseUrl}/channels/${channelId}/videos`; 

    return this._jsonp.get(url).map(response => response.json()); 
} 

// url https://api.twitch.tv/kraken/channels/khaldor/videos 

私のコンポーネントでは、このサービス機能をngOnInitに呼び出します。ネットワークタブで

ngOnInit(){ 
    this._twitchService.getChannelVideos('khaldor') 
    .subscribe(response => console.log(response)); 
} 

、私はコンソールで

{"_total":2, 
    "_links":{...}, 
    "videos": {...} 
} 

JSONオブジェクトと200応答を取得し、私が返されるJSON応答で最初のセミコロンを参照エラーvideos:1 Uncaught SyntaxError: Unexpected token :を得ます。

サービスで.mapを削除しようとしましたが、コンポーネント内のObservableオブジェクトに.subscribe()を適用すると同じエラーが発生します。

Answer 1

あなたの住所はJSONPに準拠していないと思います。その場合は、JSONP_CALLBACKの値をコールバッククエリパラメータに指定する必要があります。そのような何か：

getChannelVideos(channelId: string): Observable<any>{ 
    var url = `${this._baseUrl}/channels/${channelId}/videos?callback=JSONP_CALLBACK`; 

    return this._jsonp.get(url).map(response => response.json()); 
} 

callbackはサンプルであり、サービスに依存します。

あなたのサービスがCORSをサポートしている場合は、代わりにHttpクラスを利用することができます：

constructor(private http:Http) {} 

getChannelVideos(channelId: string): Observable<any>{ 
    var url = `${this._baseUrl}/channels/${channelId}/videos`; 

    return this.http.get(url).map(response => response.json()); 
}