Angular 6 http.get - displaying returned object in console

Question

There's a helpful Angular tutorial here:

https://coursetro.com/posts/code/154/Angular-6-Tutorial---Learn-Angular-6-in-this-Crash-Course

In the data.services.ts file there is a simple http.get which returns a json payload:

return this.http.get('https://jsonplaceholder.typicode.com/users');

I was hoping to "inspect" the payload in the Chrome developer tool and added this code:

console.log("Payload = " + this.http.get('https://jsonplaceholder.typicode.com/users'));

But what I see in Chrome is this:

Payload = [object Object]

How can I "see" the raw JSON data returned via a console.log()?

The reason I'd like to inspect the payload is that my requirement is to read an XML response. I know I have to covert the XML to JSON but I want to be sure I'm getting the XML.

Answer 1

The get method of http return an observable. An observable will work only when it has been subscribed.

this.http.get('some url ') // No api call will be made. You haven't subscribe it yet. You can check your browser network tab.

so write it like this:

console.log('Print:' + this.http.get('')); // will get 'Print: + [object object] because this is not the data that has returned but an observable object.'

To actual get the data, subscribe to the observable, like this: try this:

this.http.get('some url ').subscribe(responseData => console.log(responseData));

Answer 2

aonther way would be to get the full response by setting the response option. This can also be used to read headers from the response.

  this.http.get('https://jsonplaceholder.typicode.com/users',{ observe: 'response' })
   .subscribe(
    response => console.log(response.body)
  );

Angular.io Guide - Reading the full response

Answer 3

Make sure you're only logging out the payload and do not concatenate it with a string ("Payload = ...").

Doing this will turn the http.get method output into its toString() interpretation, [object Object]:

console.log("Payload = " + this.http.get('https://jsonplaceholder.typicode.com/users'));

Do this instead:

Data service

someMethod() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
}

Use the service

someOtherMethod() {
    this.dataService.someMethod().subscribe(payload => console.log(payload));
}

---

You can do the following for a quick test in your service (but keep in mind that no value is returned):

someMethod() {
    this.http
        .get('https://jsonplaceholder.typicode.com/users')
        .subscribe(payload => console.log(payload));
}

Answer 4

Well, I'm new at Angular 6, but since http.client returns a Observable we have to subscribe to it to get the result, and to output value to console instead of [Object object] you have to pass it to the console.log() as parameter:

this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(
  data => console.log("Payload = ", data);
);