Как построить html дерево по массиву объектов с дочерними элементами?

Question

[Bogdan Ostapchuk]

Есть массив данных

const data = [
    {
        name: 'Folder 1'
    },
    {
        name: 'Folder 2',
        children: [
            {
                name: 'Folder 3',
                children: [
                    {
                        name: 'Folder 4'
                    }
                ]
            }
        ]
    }
]

А также html структура, как они должны выводиться для пользователя. На выходе нужно получить дерево из элементов массива, где все дочерние элементы будут визуально вложены использую существующую разметку

<ul id="root">
        <li>
            <div>Folder 1</div>
        </li>
        <li>
            <div>Folder 2</div>
            <ul>
                <li>
                    <div>Folder 3</div>
                </li>
            </ul>
        </li>
    </ul>

На данный момент пока получилось вывести только элементы первого уровня, но не могу понять, как заставить выводиться дочерние элементы со своей разметкой

Comments

[ⓒⓢⓢ]

ну напрашивается прям рекурсивная функция ...

[Bogdan Ostapchuk]

Вполне согласен, что напрашивается. Но в требуемом формате структуры никак не могу правильно прикрутить к дочерним элементам

generateStructure(item) {
        const baseLi = this.createBaseNode(item.name)

        if(item.hasOwnProperty('children')) {
            item.children.forEach(item => {
                const ul = document.createElement('ul')
                const nestedLi = document.createElement('li')
                const div = document.createElement('div')
                ul.appendChild(nestedLi).appendChild(div)

                baseLi.firstChild.after(ul)

                this.generateStructure(item)
            })
        }
        
        this.root.appendChild(baseLi)
    }

В таком случае, все элементы выводятся на одном уровне, но вложенные получаю пустой элемент, который, относительно них, как раз сделан дочерним(

Answer 1

[0xD34F]

получилось вывести только элементы первого уровня, но не могу понять, как заставить выводиться дочерние элементы

Рекурсия. Если в элементе есть непустой массив children, то делаете рекурсивный вызов функции, передавая ей этот массив.

Можно самостоятельно создавать элементы:

const createNestedList = data =>
  data.reduce((ul, { name, children }) => {
    const li = document.createElement('li');
    const div = document.createElement('div');

    div.textContent = name;
    li.appendChild(div);

    if (children instanceof Array && children.length) {
      li.appendChild(createNestedList(children));
    }

    ul.appendChild(li);

    return ul;
  }, document.createElement('ul'));


document.body.appendChild(createNestedList(data));

Или собрать соответствующую разметку:

const createNestedList = data => `
  <ul>${data.map(n => `
    <li>
      <div>${n.name}</div>
      ${Array.isArray(n.children) && n.children.length ? createNestedList(n.children) : ''}
    </li>`).join('')}
  </ul>`;


document.body.insertAdjacentHTML('beforeend', createNestedList(data));