0

Display JSON data in the table

I am having an issue to access my JSON data. It is inside the array of objects of objects. How can I do that?

I am using the map function to display it, but only the name and avatar. It is nested.

JSON data

[
  {
    "id": "1",
    "person": {
      "name": "Prerna Jha",
      "avatar": "profile.jpg"
    },
    "city": "Mumbai",
    "email": "prernajha@gmail.com",
    "joiningDate": "12/02/2018",
    "role": "UI Designer"
  },
]


{data.map((curElem) => {
          const { id, name, avatar, city, email, joiningDate, role } = curElem;
          return (
            <tbody key={id}>
              <tr>
                <td>{name}</td>
                <td>{avatar}</td>
                <td>{city}</td>
                <td>{email}</td>
                <td>{joiningDate}</td>
                <td>{role}</td>
              </tr>
            </tbody>
          );
        })}

I have got few data and nested objects, but I am not getting it.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ashish
  • 9
  • 7
  • Does this answer your question? [How can I access and process nested objects, arrays, or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) – Heretic Monkey Aug 18 '23 at 22:29

1 Answers1

1

You need to access the person object first in the main JSON data:

const { id, person, city, email, joiningDate, role } = curElem;
const {name, avatar} = person
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80