Angular 2 Http get - 从响应中解析 JSON 对象

Question

我正在尝试解析我的服务器 API 在向它发出 HTTP 获取请求后返回的 JSON 对象。这是对 Http 的调用

getPayoutReport(param1, param2, param3) {

    //do some hanky panky
    //configure a requestUrl
    return this.http.get(this.requestUrl).map((res:Response)=> res.json());

}

这里是接收方法：

this.payoutReportsService.getPayoutReport(this.reservationId, this.productId, this.vendor)
        .subscribe(data => {this.payoutReport = data; console.log(this.payoutReport);});

当我记录 this.payoutReport 时，我可以在控制台中看到一个 JS Object 对象。当我在控制台中检查它时，我可以看到它具有我需要的 JSON 对象的所有属性（基本上这是我需要的对象）。除了它是一个 JS Object 对象，而不是我正在寻找的 JSON 对象格式。

我试过了：

 return this.http.get(this.requestUrl).map(this.extractData);
 private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}

但是，res.json().data 是未定义的，它返回一个空对象。

帮助表示赞赏！

Answer 1

您的代码看起来不错。问题是console.log 无法显示JSON 对象......所以只在控制台中显示“对象”。试试吧：

console.log(JSON.stringify(this.payoutReport));

这会将值转换为一个字符串，该字符串将按您的预期显示在控制台中。

Answer 2

使用如下代码，一个文件json.service.ts

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';

@Injectable()
export class JsonService {
    private _baseUrl = 'http://server/jsonfile';

    constructor( private _http: Http ) {
    }

    getJson() {

        return  this._http.get(this._baseUrl');        
    }

}

组件文件component.component.ts

import { JsonService } from './json.service';
import { Component, OnInit } from '@angular/core';

@Component({
    ...
})

export class ComponentObject implements OnInit {

    private jsonObject;

    constructor (private _JsonService: JsonService){

    }

    ngOnInit(){        
        this.getJson();
        //at this moment you can use the internal Json 
        //properties or json arrays of the Json object sample:
        //this.JsonObject.jsonPropertie


    }

    private async getJson() {

        let value;
        let promise;
        promise = await  this._JsonService.getJson().toPromise().then(
            res => {
                this.JsonObject = res.json();
            }
        );

    }


}