How do I map through an array of nested objects?

Question

I have an array called company that holds multiple objects called details in mongo DB that I need to get the data from, specifically, I want to grab the company name and the employee's names from the company array and display them in a list. My question is how do I drill in the array and render the company and employee names.

Currently in my nested map in the List component when I do details.employee, I am only able to get the result of person1 from company ABC and I need all results person 1, 2, and 3 showing from both company ABC and company EFG"

Here is the code from sandbox (note just look at List.js)

import axios from "axios";
import { useEffect, useState } from "react";

const List = () => {
  const [company, setCompany] = useState([
    {
      details: [
        {
          employee: "person2",
          date: "test date",
          tax: "test tax",
          balance: "22"
        },
        {
          employee: "person3",
          date: "test date",
          tax: "test tax",
          balance: "22"
        }
      ],

      company: "TEST-ABC",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    },
    {
      details: {
        employee: "person1",
        date: "test date",
        tax: "test tax",
        balance: "22"
      },
      company: "TEST-EFG",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    }
  ]);

  return (
    <>
      <h2>Customer List</h2>
      {company.map((c, i) => (
        <ul key={i}>
          {c.company}
          {company.map((d, i) => (
            <li key={i}>{d.details.employee}</li>
          ))}
        </ul>
      ))}
    </>
  );
};
export default List;


  return (
    <>
      <h2>Customer List</h2>
      {company.map((c, i) => (
        <li key={i}>
          {c.company}
          {company.map((d, i) => (
            <li key={i}>{d.details.employee}</li>
          ))}
        </li>
      ))}
    </>
  );
};
export default List;

CertainPerformance · Accepted Answer · 2021-07-23 03:32:24Z

The inner loop needs to be over the employees, not over the company again.

Consider making the stateful variable plural to make it easier to understand too. (since you need to refer to a singular company while mapping, don't want the whole array of companies to be named company as well)

The input structure is quite odd, detail looks to either be an array or an object. (If at all possible, change the structure to be consistent so that it's always an array. Otherwise, you'll have to check whether it's an array or an object every time when rendering.)

Live demo:

const App = () => {
  const [companies, setCompanies] = React.useState([
    {
      details: [
        {
          employee: "person2",
          date: "test date",
          tax: "test tax",
          balance: "22"
        },
        {
          employee: "person3",
          date: "test date",
          tax: "test tax",
          balance: "22"
        }
      ],

      company: "TEST-ABC",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    },
    {
      details: {
        employee: "person1",
        date: "test date",
        tax: "test tax",
        balance: "22"
      },
      company: "TEST-EFG",
      _id: "60dba9fe7641a44d40364c1f",
      __v: 0
    }
  ]);
  
  
  return (
    <React.Fragment>
      <h2>Customer List</h2>
      {companies.map((company, i) => (
        <ul key={i}>
          {company.company}
          {
          Array.isArray(company.details)
            ? company.details.map((detail, j) => <li key={j}>{detail.employee}</li>)
            : company.details.employee
          }
        </ul>
      ))}
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Are you sure you changed the variable name? Use companies for the array, not company
Oh, the input structure is quite strange. Consider changing it so that detail is always an array, rather than sometimes an array and sometimes an object.
You can press "Run code snippet" to see the code in my answer working. Like I said in the answer and in the comment above, it would make the most sense by far for the structure to be consistent - have detail be an array of objects, rather than sometimes an array and sometimes not.
this answer is different from before, let me try it now as I did not see the turnery expression you had

Collectives™ on Stack Overflow

How do I map through an array of nested objects?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related