How can I show dynamic nested list in JavaScript. So, problem is that I don't know how many nested data I will have, but I want to show all of them.

Example of the data:

const data = [{
  name: 'level1a',
  otherData: [
    { 
      name: 'level2a'
    },
    {
      name: 'level2b'
    },
    {
      name: 'level2c',
      otherData: [
        {
          name: 'level3a',
          otherData: [
            {
              name: 'level4a'
            },
            {
              name: 'level4b'
            }
          ]
        },
        {
          name: 'level3b'
        }
      ]
    }
  ]
}]

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This is just example, and I want to show in some list all this. This should be dynamic because I don't know how many levels I will have. It can be 5, 10, 20...I don't know, that's why it should be dynamic.

I want to show something like this in html

level1a
 -- level2a
 -- level2b
 -- level2c
     -- level3a
         -- level4a
         -- level4b
     -- level3b

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can solve this problem by creating a recursive function that loops through the nested data and creates new HTML nodes at each point. This function will take an initial container that you provide, and it builds its contents recursively throught the nested array. You can create list nodes or simple containers and add your own CSS for styling and the cascading look.

Here's an example:

// recursively add text and loop through nested data
function displayNested(container, data) {
    data?.forEach(({ label, children }) => {
        // create text node
        const elementText = document.createTextNode(label);
        // create new container for the element
        const elementDiv = document.createElement('div');
        // add CSS class for nested display
        elementDiv.classList.add('container');
        // append text element to new container
        elementDiv.appendChild(elementText);
        // append new container to the current container
        container.appendChild(elementDiv);
        // recursively do the same for the current data's children
        displayNested(elementDiv, children);
    });
}

const data = [{
    label: 'level1a',
    children: [{ 
        label: 'level2a'
    }, {
        label: 'level2b'
    }, {
        label: 'level2c',
        children: [{
            label: 'level3a',
            children: [{
                label: 'level4a'
            }, {
                label: 'level4b'
            }]
        }, {
            label: 'level3b'
        }]
    }]
}];
const container = document.getElementById('main-container');
displayNested(container, data);

.container {
    padding: 0px 16px;
}

<div id="main-container" />

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can achieve this using a self-invoking function, than you can use css to format first level in some other way.

const data = [{
  name: 'level1a',
  otherData: [
    { 
      name: 'level2a'
    },
    {
      name: 'level2b'
    },
    {
      name: 'level2c',
      otherData: [
        {
          name: 'level3a',
          otherData: [
            {
              name: 'level4a'
            },
            {
              name: 'level4b'
            }
          ]
        },
        {
          name: 'level3b'
        }
      ]
    }
  ]
}];
generate(data, document.getElementById("container"));
function generate(data, parent) {
  const ul = document.createElement("ul");
  data.forEach((el) => {
  const li = document.createElement("li");
  li.innerHTML = el.name;
  if(el.otherData) generate(el.otherData,li);
  ul.appendChild(li);
  });
  parent.appendChild(ul);
}

<div id="container"></div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>