Mit der Fußball-Daten-API mit Angular

Question

versuche ich mit Angular einen erfolgreichen api-Aufruf zum Fußball-Daten-API zu machen. Hier ist die Dokumentation: http://www.football-data.org/documentation

Mit dem Beispielcode in der Dokumentation, habe ich es geschafft JSON Daten zurückzubekommen jQuery verwenden, etwa so:

$.ajax({ 
    headers: { 'X-Auth-Token': 'YOUR_API_TOKEN' }, 
    url: 'http://api.football-data.org/v1/fixtures?timeFrame=n1', 
    dataType: 'json', 
    type: 'GET', 
}).done(function(response) { 
    // do something with the response, e.g. isolate the id of a linked resource   
    var regex = /.*?(\d+)$/; // the ? makes the first part non-greedy 
    var res = regex.exec(response.fixtures[0]._links.awayTeam.href); 
    var teamId = res[1]; 
    console.log(teamId); 
}); 

aber relativ neu in Angular zu sein, ich bin nicht sicher, wie dasselbe in dieser Umgebung zu tun. Wenn man durch einige Tutorials, ich habe Setup ein service die HTTP zu map eine Antwort von der URL zu JSON verwendet wie folgt:

export class FootballService { 
    private _url: string = "http://api.football-data.org/v1/competitions/426/leagueTable"; 
    constructor(private _http: Http) { } 

    getLeagueTable(){ 
    return this._http.get(this._url) 
      .map((res: Response) => res.json()); 
    } 
} 

Und ich diesen Dienst importiert haben auf meine Komponente wie folgt aus:

export class ApiComponent implements OnInit { 
    table = []; 
    constructor(private _footyService: FootballService) { } 

    ngOnInit() { 
    this._footyService.getLeagueTable() 
     .subscribe(res => this.table = res); 
    } 

} 

Aber es gibt eindeutig Probleme in meinem Code, die ich nicht identifizieren kann, da ich dadurch kein gültiges JSON bekomme. Ich würde mich freuen, wenn mir jemand helfen könnte.

Answer 1

einen Blick auf die Winkel Tutorial für http-Client. insbesondere die headers Abschnitt: https://angular.io/docs/ts/latest/guide/server-communication.html#!#headers

müssen Sie den HTTP-Dienst wie folgt verwenden:

ersten Blick auf die api für Http: https://v2.angular.io/docs/ts/latest/api/http/index/Http-class.html

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

die RequestOptionsArgs api: https://v2.angular.io/docs/ts/latest/api/http/index/RequestOptionsArgs-interface.html

interface RequestOptionsArgs { 
    url : string 
    method : string|RequestMethod 
    search : string|URLSearchParams 
    headers : Headers 
    body : any 
    withCredentials : boolean 
    responseType : ResponseContentType 
} 

so Sie können verwenden:

let headers = new Headers({ 'X-Auth-Token': 'YOUR_API_TOKEN' }); 
    let options = new RequestOptions({ headers: headers }); 
    this.http.get('URL HERE', options).subscribe(...) 

Answer 2

Sie müssen get 'YOUR_API_TOKEN' aus dem Service-Provider und geben es in Header

headers: { 'X-Auth-Token': 'YOUR_API_TOKEN' } 

wie

this._http.get(this._url, 
    new RequestOptions({headers: {'X-Auth-Token': 'YOUR_API_TOKEN'}}));