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.

I believe your Payload is an Array of Array so it wont be showed like you want in the console. You can put a debugger point and manually go, with the mouse, over it and see its properties. Can you do a print-stamp of what you get when you go over with the mouse? — Jacopo Sciampi
– Jacopo Sciampi, Commented Sep 14, 2018 at 6:31
Shashikant -- Yes, I'm using HttpClient. Thanks for contributing! — Harry Whitehouse
– Harry Whitehouse, Commented Sep 14, 2018 at 19:58

Shadab Faiz · Accepted Answer · 2018-09-14 05:31:47Z

6

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));

answered Sep 14, 2018 at 5:31

Shadab Faiz

2,5182 gold badges22 silver badges32 bronze badges

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

1 Comment

Harry Whitehouse Over a year ago

Shadab -- This is a great clarification -- thank you. Now I can see my JSON response array clearly. My next challenge is to deal with an XML response.

deelde · Accepted Answer · 2018-09-14 06:30:35Z

0

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

edited Sep 14, 2018 at 6:30

answered Sep 14, 2018 at 5:41

deelde

1,61114 silver badges26 bronze badges

1 Comment

Harry Whitehouse Over a year ago

Yes, Dirk, this also worked. Thanks for clearing up some misunderstanding I had!

Gorka Hernandez · Accepted Answer · 2018-09-14 06:40:31Z

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));
}

Dmitriy Snitko · Accepted Answer · 2018-09-14 14:49:34Z

0

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);
);

edited Sep 14, 2018 at 14:49

Dmitriy Snitko

9605 silver badges14 bronze badges

answered Sep 14, 2018 at 5:37

Marcelo Rubim

1374 bronze badges

6 Comments

deelde Over a year ago

subscribing is correct, but the console.log() would also return Payload = [object Object], ....

Marcelo Rubim Over a year ago

Are you sure? I got this code from the same course the post author got his: this.data.getUsers().subscribe( data => this.users$ = data );

deelde Over a year ago

your concatining a string. If you output just via console.log(data) you will get your output.

Dmitriy Snitko Over a year ago

console.log("Payload = ", data) comma sign except + will be correct

Harry Whitehouse Over a year ago

Marcello -- thanks for contributing here! I too am very new to Angular and it's been a real challenge for me!

|

Collectives™ on Stack Overflow

Angular 6 http.get - displaying returned object in console

4 Answers 4

1 Comment

1 Comment

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related