How Do i Iterate through a JSON object in ReactJS?

Question

On my ReactJS file, I JSON.stringify my object to see what i get.

return ( 
    <div> 
        { JSON.stringify(peopleChannel) };
    </div>
)

I get return something like this

{
  "Y3WJb6": {
    "photoURL": "https://myimage.com",
    "email": "abc.com"
  },
  "Yzfd6": {
    "photoURL": "https://myimage23.com",
    "email": "adfasfd.com"
  }
}

How do I render it into like a list?

1) Don't stringify it. You can't iterate over a string (you can, but not how you want). 2) You need to map over the Object.values and extract the data you need and return a new array. — Andy
– Andy, Commented Jul 28, 2021 at 20:33
@evolutionxbox. Oh I thought he was getting JSON from an API or file, in which case you need to parse it. — sid c
– sid c, Commented Jul 28, 2021 at 20:36
There is no such thing as a JSON object. You either mean JSON (which is a string) or a JS object. — evolutionxbox
– evolutionxbox, Commented Jul 28, 2021 at 20:39

James · Accepted Answer · 2021-07-28 20:39:19Z

4

You can map over Object.values(peopleChannel), or if you need the object keys as well use Object.entries:

   return (
    <div>
    {Object.entries(peopleChannel).map(([id, {photoURL, email}]) => (
      <div>
        <div>{id}</div>
        <div>{photoURL}</div>
        <div>{email}</div>
      </div>
    ))}
    </div>
   )

answered Jul 28, 2021 at 20:39

James

22.4k5 gold badges29 silver badges44 bronze badges

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

1 Comment

Dennis Over a year ago

Thank you! I stop trying map when its a Object instead of Array. I feel so dumb now. Thank you so much.

Collectives™ on Stack Overflow

How Do i Iterate through a JSON object in ReactJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related