Demo

recursiveFlatReference.js

const EMPLOYEE_DATA = [
  {
    id: "001",
    name: "Mario",
    title: "Lead Plummer",
    underlings: [
      {
        id: "002",
        name: "Luigi",
        title: "Plumbing Assistant",
        underlings: []
      },
      {
        id: "003",
        name: "Peach",
        title: "Princess",
        underlings: [
          {
            id: "004",
            name: "Toad",
            title: "Part-time Puppet",
            underlings: []
          },
          {
            id: "005",
            name: "Toadette",
            title: "Pond Maintinence",
            underlings: []
          }
        ]
      }
    ]
  },
  {
    id: "999",
    name: "Bowser",
    title: "Boss",
    underlings: [
      {
        id: "998",
        name: "Wario",
        title: "Car Warranty Caller",
        underlings: []
      },
      {
        id: "997",
        name: "Waluigi",
        title: "Imitation Crab Enthusiast",
        underlings: []
      },
      {
        id: "996",
        name: "Boo",
        title: "Haunted House Manager",
        underlings: []
      }
    ]
  }
];

const setEmployeeRefs = (employees, references = []) => {
  let employeeId = "";
  for (const employee of employees) {
    employeeId = employee?.id;
    employee.underlingIds = [];
    if (!employee?.oversearId) {
      employee.oversearId = null;
    }

    references.push(employee);
    setEmployeeRefs((employee.underlings ?? []).map(subordinate => {
      employee?.underlingIds.push(subordinate?.id);
      subordinate.oversearId = employeeId;
      return subordinate;
    }), references);
  }
	
	console.log(references);
  return references;
};

const mapPropsToTable = ({ id, name, title, underlingIds, oversearId }) => `
	<tr>
		<td>${id}</td>
		<td>${name}</td>
		<td>${title}</td>
		<td>${underlingIds.join(",").replace(/[,]/g, ', ')}</td>
		<td>${oversearId ?? ""}</td>
	</tr>
`;

document.body.insertAdjacentHTML('afterbegin', `
	<table>
		<caption>Mario Bros Employees</caption>
		<thead>
			<tr>
				<th scope="col">ID</th>
				<th scope="col">Name</th>
				<th scope="col">Title</th>
				<th scope="col">Underling References</th>
				<th scope="col">oversear References</th>
			</th>
		</thead>
		<tbody>${setEmployeeRefs(EMPLOYEE_DATA).map(mapPropsToTable)}</tbody>
	</table>
`);