Angular2 Http.Post - How to view webapi response

Question

I'm new to Angular2/Typescript and I'm writing my first web application.

I'm trying to call a webapi using POST, it works, if I intercept the call using FIDDLER I can see the Json response.

Now, how I can log in the browser console the json ouput?

The code is this:

code call

var s = this.myService.doSearch();
s.subscribe(
    data=> this.data = data,
    error => this.errorMessage = <any>error
);

console.log(s);

service method

doSearch() {
var url = this.baseUrl;

return this.http.get(url)
    .map(response => response.json())
    .catch(this.handleError);
}

My question is: how and where I can view and manage the Json Output ?

Thanks

Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](http://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — eko, Apr 11 '17 at 08:26

score 1 · Answer 1 · 2017-04-11T08:33:26.940

1

If you are debug or run your application in browser you can got to inspect and then move to the Network tab. In this tab select your POST Request and the go to the tab Response and voila there is your json Response

Edit:

To log all response data do this:
return this.http.get(url)
    .map(res => res.json())
    .subscribe(data => { console.log(data);})
    .catch(this.handleError);
}

edited Apr 11 '17 at 08:33

answered Apr 11 '17 at 08:26

thanks luka, this is exactly what I'm doing, but I what I need to do is logging the output using console.log command – DarioN1 Apr 11 '17 at 08:28
1

Ah ok so you want to print your json response witch you got from the server into your console? – Apr 11 '17 at 08:29
Yes, that is what I need – DarioN1 Apr 11 '17 at 08:31
Edited my Question – Apr 11 '17 at 08:33

Mario Petrovic · Accepted Answer · 2017-04-11T09:18:54.310

1

You need to console.log it after the async code is finished:

var s = this.myService.doSearch();
s.subscribe(
    data=> {
          this.data = data;
          console.log(data);
    },
    error => this.errorMessage = <any>error
);

edited Apr 11 '17 at 09:18

answered Apr 11 '17 at 08:28

Mario Petrovic

7,500
14
42
62

isuruAb · Answer 3 · 2017-04-11T08:45:13.130

Try this this will print what you have in your returned observable .

var s = this.myService.doSearch();
s.subscribe(data=> {
       this.data = data;
       console.log(data);
       },
       error => this.errorMessage = <any>error
);

Always remember If you want to get data from observable.you need to subscribe it.

you can't log it like this console.log(s); because s returns an observable. you should subscribe and refer those data inside the subscribe .

Angular2 Http.Post - How to view webapi response

code call

service method

3 Answers3