Why am I getting [object Object] after accessing JSON data?

Question

I am making a simple GET request and filling up a webpage with some data. Every other line works except for 'addresses' which contains two arrays, and on my webpage it prints out '[object Object]', instead of the data. Here is an example of the JSON (apologies for the poor formatting):

data: Array(7)
   0:
   addresses: Array(2)
   0:
     city: "Houghton"
     line1: "800 East Lakeshore Drive"
     line2: ""
     line3: ""
     postalCode: "49931"
     stateCode: "MI"
     type: "Physical"

proto: Object

Here is the code block where I try to access 'addresses':

for (let i = 0; i < parkData.length; i++) {
    $("#results-list").append(`<h2>${parkData[i].fullName}</h2>
    <p>${parkData[i].addresses[0]}</p>
    <a href=${parkData[i].directionsUrl}>Directions</a><br>
    <a href=${parkData[i].url}>Website</a>
    <p>${parkData[i].description}</p>

Like I said above, all of the other lines work but when I try to get the first index of addresses I just get that weird Object response. Any ideas? Thank you!

This is not JSON. This is javascript object data. They are different — ControlAltDel
– ControlAltDel, Commented Oct 23, 2020 at 19:30

IvanD · Accepted Answer · 2020-10-23 19:49:28Z

1

[object Object] means that it's not a string but an object that (probably) has an address as property of this object, i.e. instead of parkData[i].addresses[0] you need to access some property (which one I cannot tell from your code as you are not showing the whole object that you got from JSON), for example like this:

const {city, line1} = parkData[i].addresses[0].city
const fullAddress = `City: {city}, Address: {line1}`

And only then, after constructing the address, you add it into your page as fullAddress

edited Oct 23, 2020 at 19:49

answered Oct 23, 2020 at 19:30

IvanD

2,98320 silver badges33 bronze badges

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

1 Comment

IvanD Over a year ago

Please mark the answer as accepted if it helped you :)

nacho · Accepted Answer · 2020-10-23 20:20:16Z

0

This is because you need to go deeper in some of the properties for sure. Double check every iteration and you will find that you are appending an object. I think you didn’t paste all the response. You can use jsonviewer to better see the structure

Edit-> As I can see...address is an object, so you need to iterate over it in order to append strings.

So it would be: ... address[0].map(a => ... a.someAddressProperty

edited Oct 23, 2020 at 20:20

answered Oct 23, 2020 at 19:34

nacho

6511 gold badge12 silver badges32 bronze badges

1 Comment

GenevieveKuzak Over a year ago

Hi, I just edited the original post and added the full Object. The address is broken up into different lines so I am unsure of how to get the full address.

Collectives™ on Stack Overflow

Why am I getting [object Object] after accessing JSON data?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related