从响应中提取数据 Angular 2

Question

我有 1 个组件和 1 个服务。

组件元素：

...
constructor(private requestService : RequestService)
{

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

服务：

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);
}

但这就是我打印的内容...我如何直接从此请求中提取 'listaUniversita' 数组？

Answer 1

在你的 ngOnInit 中得到返回的承诺如下：

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

Console.log 将显示从服务器返回的内容。即 console.log(result.listaUniversita)

Answer 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;
    )};
}

Answer 3

您可以向服务添加新的方法调用 extractData，它应该是这样的。

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

并像这样更改 http 调用。

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

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

使用此方法可以最大程度地减少代码大小，否则您必须对每个 http 调用进行硬编码response => response.json().data。

从响应中提取数据 Angular 2

Extract data from respone Angular 2

json

response

promise

angular