Angular 2 Http get - parsing JSON object from response

Question

I am trying to parse a JSON object that my server API returns after making an HTTP get request to it. Here is the call to the Http

getPayoutReport(param1, param2, param3) {

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

}

Here is the receiver method:

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

When I log this.payoutReport, I can see a JS Object object in the console. When I examine it in the console, I can see that this has all the properties of the JSON object I need (basically this is the object I need). Except that it is a JS Object object, not the JSON object format I am looking for.

I tried:

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

But then, res.json().data is undefined, and it returns an empty object.

Help appreciated!

When you put res.json(), it converts the json object to js object, what is the problem — alehn96
– alehn96, Commented Jun 30, 2017 at 21:09
Not sure why this was voted down. Other than the terminology confusion regarding JSON objects, this seems to be a valid question. — DeborahK
– DeborahK, Commented Jun 30, 2017 at 21:43

DeborahK · Accepted Answer · 2017-06-30 21:42:32Z

2

Your code looks fine. The problem is that the console.log cannot display a JSON object ... so just displays "object" in the console. Try instead:

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

This converts the value to a string that will appear in the console as you expect.

answered Jun 30, 2017 at 21:42

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abel Valdez · Accepted Answer · 2017-06-30 21:35:01Z

1

Use the following code, one file 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 file 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();
            }
        );

    }


}

answered Jun 30, 2017 at 21:35

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

1 Comment

Jed Lynch Over a year ago

Funny thing is I saw this ".json()" on the first example I ever saw for Angular 2/4. Only, when I needed it, I forgot the exact syntax, and I couldn't find it anywhere. Thanks.

Collectives™ on Stack Overflow

Angular 2 Http get - parsing JSON object from response

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related