2016-08-02 9 views
2

Ich habe 1 Komponente und 1 Service.Extrahieren von Daten aus der respone Angular 2

Component-Element:

... 
constructor(private requestService : RequestService) 
{ 

} 
ngOnInit() 
{ 
    this.a = this.requestService.send_request(urlWebAPI); 
    console.log(this.a); 
} 
... 

Service:

constructor(private http: Http) 
{ 
    this.http = http; 
    this.headers = new Headers 
    ({ 
     'Content-Type': 'application/json' 
    }); 
} 

send_request(additional_url: String) 
{  
    return this.http.post(this.url + additional_url, {headers: this.headers}) 
     .toPromise() 
     .then(response => response.json()) 
     .catch(this.handleError); 
} 
private handleError(error: any) 
{ 
    console.error('An error occurred', error); 
    return Promise.reject(error.message || error); 
} 

Aber das ist, was ich gedruckt werden ... Wie ich direkt 'listaUniversita' Array aus dieser Anforderung extrahieren? enter image description here

Antwort

2
send_request(additional_url: String) 
{  
    return this.http.post(this.url + additional_url, {headers: this.headers}) 
     .toPromise() 
     .then(response => response.json().data)     //<----changed it 
     .catch(this.handleError); 
} 


ngOnInit() 
{ 
    this.requestService.send_request(urlWebAPI).then((result) => { //<----changed it 
     this.a=result; 
    )}; 
} 
+0

Später, wenn ich "a" drucke, ist es immer noch "Undefined" –

+0

Sie chagte es wie hier gezeigt? – micronyks

+1

Ja, ich musste nur das Feld "Daten" ändern ... ty! –

1

In Ihrem ngOnInit das zurückgegebene Versprechen erhalten, wie folgt:

ngOnInit() 
{ 
    this.requestService.send_request(urlWebAPI).then((result) => { 
    console.log(result); 
    )}; 
} 

console.log wird der Inhalt vom Server angezeigt werden zurückgegeben. d.h console.log (result.listaUniversita)

2

können Sie neuen Methodenaufruf extractData den Dienst hinzufügen und es sollte so sein.

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

und ändern Sie den http-Aufruf wie folgt.

return this.http.post(this.url + additional_url, {headers: this.headers}) 
    .toPromise() 
    .then(this.extractData) 
    .catch(this.handleError); 

Referenz https://angular.io/docs/ts/latest/guide/server-communication.html

diese Methode verwenden Sie den Code Größe, was Sie response => response.json().data nennen dies jeder http harten Code haben zu minimieren.

+0

Die this.extractData-Methode führt manchmal zu Fehlern und liefert nicht die gewünschten Ergebnisse. statt hardcoding response => response.json(). data gibt es was ich will. Irgendwelche Ideen? – Lobato