Как построить 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 createTreeElement = data =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n) => {
        const li = document.createElement('li');
        const div = document.createElement('div');
        div.textContent = n.name;
        li.append(div, createTreeElement(n.children));
        ul.append(li);
        return ul;
      }, document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

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

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


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