Angular2 POST Observable Request returns a not readable JSON Object

Question

I'am using an Angular2 POST Request with Observable to a Node API. I keep getting a strange JSON Object back as Response.

Response from Node API App - via Chrome Console:

{"_isScalar":false,"source":{"_isScalar":false,"source":
{"_isScalar":false,"source":{"_isScalar":false},"operator":
{"delay":500,"scheduler":{"actions":[],"active":false}}},"operator":
{}},"operator":{"caught":"[Circular]"}}

Angular2 Code:

login2(): Observable<any> {

    this.url = 'http://localhost:3080/user/login';

    this.obj.email =  'jhon.doe@foo.de';
    this.obj.password = 'pass';

    let formObj = this.form.getRawValue();
    let serializedForm = JSON.stringify(formObj);

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers }); 

    var obsRequest = this.http.post(this.url, this.obj, options)
        .map(res => res.json())
        .catch( (error: any) => Observable.throw(error.json().error || 'Server error') );


    console.log(JSON.stringify(obsRequest, this.avoidCircular(obsRequest)));

    return obsRequest;
}

P.S. avoidCircular is an extra workaround for the javaScript built-in JSON.stringify, cause when I don't use it get the following error:

TypeError: Converting circular structure to JSON

avoidCircual Code:

avoidCircular(objCens) {
    var i = 0;
    return function(k, v) {
        if(i !== 0 && typeof(objCens) === 'object' && typeof(v) == 'object' && objCens == v) 
        return '[Circular]'; 
        if(i >= 29) 
        return '[Unknown]';
        ++i; 
        return v;  
    }
}

The API call is working fine via Postman!

Any idea how to fix this please?

score 1 · Accepted Answer · answered Jul 11 '17 at 10:59

1

obsRequest is not the response from your request, it is the request observable. In order to receive the response you need to subscribe to it.

var obsRequest = this.http.post(this.url, this.obj, options)
        .map(res => res.json())
        .catch( (error: any) => Observable.throw(error.json().error || 'Server error') );

obsRequest.subscribe((response)=> console.log(response));

I suggest you to read the http module of the official documentation: https://angular.io/guide/http

answered Jul 11 '17 at 10:59

eko

39,722
10
72
98

Thanks! you saved my day. But I also would like to mention that I did face another issue which I was able to fix. It has to do with the Angular InMemoryBackendService built-in service. I was using it in the same app - Just testing - for other component. It seems like it's doing a kind of 'redirect' from http.get method... after commenting it out in app.component, it did work. See: [Error: Collection not found](https://stackoverflow.com/questions/38432108/angularjs-2-getting-data-from-json-file-not-working) – k.vincent Jul 11 '17 at 11:48
@k.vincent well I'm not really familiar with InMemoryBackendService but glad you figured it out :-) – eko Jul 11 '17 at 11:50
@k.vincent by the way, if the issue is solved you can mark an answer as accepted as shown here: http://meta.stackexchange.com/a/135826 – eko Jul 11 '17 at 11:55
1

Done, Thanks for the notice. – k.vincent Jul 11 '17 at 12:02

Angular2 POST Observable Request returns a not readable JSON Object

1 Answers1