How to loop through the nested JSON data in React?

Question

I am trying to map through nested JSON Data in React. The data looks like this

const employees = [
  {
    data: [
      {
        stuff: [
          {
            onetype: [
              { id: 1, name: "John Doe" },
              { id: 2, name: "Jane Doe" }
            ]
          },
          { othertype: [{ id: 2, company: "IKEA" }] }
        ]
      },
      {
        otherstuff: [
          {
            thing: [
              [1, 42],
              [2, 2]
            ]
          }
        ]
      }
    ]
  }
];

I want to map each oneType name. Right now I am trying to do with map function but not sure whether I can do this or not. I have tried Object.keys , Object.entries but it didn't help and also tried {oneType.name} that doesn't work either. I am not sure how to reach the inner index of oneType.

Does anybody have any idea? Am I doing something wrong here or should I map the whole array of objects in a totally different way?

Update : I want to show listedItems of oneType.name on UI page

• John Doe
• Jane Doe

The render method looks like this:

 function App() { const employees = [ { data: [ { stuff: [ { onetype: [ { id: 1, name: "John Doe" }, { id: 2, name: "Jane Doe" } ] }, { othertype: [{ id: 2, company: "IKEA" }] } ] }, { otherstuff: [ { thing: [ [1, 42], [2, 2] ] } ] } ] } ]; return ( <div className="App"> {employees && employees.data && employees.data.length > 0 ? employees.data.map((item) => ( <div> {employees.data[item].stuff.map((datum) => ( <div> {employees.data[item].stuff[datum].map((type) => ( <div> {employees.data[item].stuff[datum].onetype[type].map( (other) => ( <h1>{other.name}</h1> ) )} </div> ))} </div> ))} </div> )) : null} </div> ); } ReactDOM.render(<App />, document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Your data schema is kind of random :|, to keep the code clean I created a helper function to iterate over the keys of an object and iterate again in case it is an Array, this print the list of names and in case you needed also the company name, you can omit it by adding this expression in the condition that avoids rendering arrays

if (Array.isArray(datumType) || !datumType.name) return null;

 function renderWithKeys(item, renderFunction) { return Object.keys(item).map((key) => ( <div> {Array.isArray(item[key]) ? item[key].map((child) => renderFunction ? renderFunction(child) : renderWithKeys(child) ) : JSON.stringify(item[key])} </div> )); } function App() { const employees = [ { data: [ { stuff: [ { onetype: [ { id: 1, name: "John Doe" }, { id: 2, name: "Jane Doe" } ] }, { othertype: [{ id: 2, company: "IKEA" }] } ] }, { otherstuff: [ { thing: [ [1, 42], [2, 2] ] } ] } ] } ]; const employeesData = employees[0]; return ( <div className="App"> {employeesData && employeesData.data && employeesData.data.length > 0 ? employeesData.data.map((item, employeesIndex) => ( <div key={employeesIndex}> {renderWithKeys(item, (datum) => renderWithKeys(datum, (datumType) => { if (Array.isArray(datumType)) return null; return <h1>{datumType.name || datumType.company}</h1>; }) )} </div> )) : null} </div> ); } ReactDOM.render(<App />, document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

In case you only need to access those names and you're using lodash, it can be simplified to this code

  import get from "lodash/get";
  
  ...

  const data = get(employees, "[0].data[0].stuff[0].onetype");
  return (
    <div className="App">
      {data && data.map((item) => <h1>{item.name}</h1>)}
    </div>
  );
}