How to iterate over an array with unknown nesting?

Question

I recently started to study destructuring, but I haven’t come across this yet. I ran into a problem that I don't know how to draw an array of objects endlessly depending on its contents...

const items={
  title: 'Production',
  subTasks: [
    {
      title: 'Production 1',
      subTasks: [{ title: 'Production 1 - 1' }, { title: 'Production 1 - 2' }],
    },
  ],
}

to get this html

<div style="padding-left:25px">
  <h4>Production</h4>
  <div style="padding-left:25px">
    <h4>Production 1</h4>
    <div style="padding-left:25px">
      <h4>Production 1 - 1</h4>
      <h4>Production 1 - 2</h4>
    </div>
  </div>
</div>

and so on arbitrarily, depending on whether the object has subTasks... I will be very grateful for the help!!!

score 1 · Accepted Answer · answered Sep 04 '22 at 08:49

With recursion will go as deep as the array go and do what ever you want

an example will look something like this

const items = {
  title: "Production",
  subTasks: [
    {
      title: "Production 1",
      subTasks: [{ title: "Production 1 - 1" }, { title: "Production 1 - 2" }],
    },
  ],
};

const renderItems = (items) => {
  return items.map((item) => {
    return (
      <ul>
        <li>{item.title}</li>
        {item.subTasks && renderItems(item.subTasks)}
      </ul>
    );
  });
};

How to iterate over an array with unknown nesting?

1 Answers1