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?

Answer 1

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