Fetch API in Javascript returning [object, object]

Question

So i have this code here, which calls from a URL and displays the array in the console

fetch('http://jsonplaceholder.typicode.com/users') 
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem');  
        return;  
      }

      response.json().then(function(data){  
        console.log(data); 
      });  
    }  
  )  
  .catch(function(err) {  
    console.log('Fetch Error', err);  
})

However, it prints out:

[object Object] {
  address: [object Object] {
    city: "Lebsackbury",
    geo: [object Object] { ... },
    street: "Kattie Turnpike",
    suite: "Suite 198",
    zipcode: "31428-2261"
  },

Any idea on how to remove the [object, object] and have it display normally, the same as in the url??

My answer below answers your direct question, but there is a larger question around how you actually want to use the data--I assume something more than just printing the result to console? — Alan
– Alan, Commented Oct 17, 2016 at 17:48

Alan · Accepted Answer · 2020-11-12 21:57:35Z

5

Fetch doesn't return [object object]. It's working the way it should.

What you are observing is the by-product of how console.log works on nested objects--it's using a built-in "toString()", which adds some extra information, such as the type.

That behavior is different than how modern web browsers deal with JSON text, which is to just show it directly in the browser window in it's raw state, along with some basic formatting.

To get what you are expecting, use console.log(JSON.stringify(data)); which will use the built in JSON stringifier. To add nicer formatting you can use console.log(JSON.stringify(data,null,2));

However, you are taking the JSON response, parsing it into an object, then taking that object and turning it back into a JSON string. Which is pretty silly.

Since the URL returns a JSON string, you could just console log that JSON string directly.

Something like console.log(response.body);

edited Nov 12, 2020 at 21:57

answered Oct 17, 2016 at 17:44

Alan

47k20 gold badges118 silver badges138 bronze badges

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

2 Comments

Rounin Over a year ago

Genuine question - is there any difference here between using JSON.toString and JSON.stringify?

Alan Over a year ago

Yes, actually that is a good catch. JSON.toString() is just Object.prototype.toString(), the actual answer should be JSON.stringify()!

Collectives™ on Stack Overflow

Fetch API in Javascript returning [object, object]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related