角度2のツイッチAPIの呼び出し

Question

私は、チュートリアルの直後ではない、Angular 2（2.1.0）のサードパーティAPIへの最初のhttpコールを試みています。

私はFreeCodeCampチャレンジのためにTwitch APIを呼び出そうとしています（これはかなり苦しいです）。私はjQueryで書かれた実際の例からAPIコールを受けたので、正しい場所を呼び出そうとしていることを知っていますが、データを取得できないようです。

私のサービスには、以下があります。

apiBaseUrl: string = 'https://wind-bow.hyperdev.space/twitch-api/streams/'; 
user: string = 'ESL_SC2'; 
query: string = '?callback=?'; 

constructor(public jsonp: Jsonp) { } 

refresh(): Observable<string> { 
    const apiCall: string = this.apiBaseUrl + this.user + this.query; 

    return this.jsonp.get(apiCall) 
     .map((res: Response) => res.json()) 
     .catch((err: any) => Observable.throw(err.json().err)); 
} 

と私は、このようなコンポーネントで、それに加入しています：

ngOnInit() { 
    this.twitchService.refresh().subscribe(
     val => this.val = val, 
     error => this.errorMessage = <any>error); 
} 

しかし、私のコンソールで、私はエラー

を持っています

Uncaught SyntaxError: Unexpected token ===

エラーをクリックすると、私の開発ツールの[ソース]タブ：

/**/ typeof === 'function' && 
({"stream":{"_id":23623614656,"game":"StarCraft II","viewers":283,... 
(etc.) 

私はAPIからデータを取得しているように見えますが、なぜコンポーネントに正しく入ってこないのか分かりません。誰かがこれについて何か光を当てることができるなら、私は本当にそれを感謝します。

Answer 1

これを機能させるために必要なことは1つだけです。クエリ文字列のコールバックパラメータにJSONP_CALLBACKを定義してください。

query: string = '?callback=JSONP_CALLBACK'; 

非常に近いです！私はここで、この知った - How to make a simple JSONP asynchronous request in Angular 2?

そして、これは変更して、結果を実証plunkerです：http://plnkr.co/edit/QgBEcxycferSx2bTujQ6?p=preview