как показать структуру каталогов в javascript + HTML

Question

let data = [
    {
        type: "folder",
        name: "animals",
        path: "/animals",
        children: [
            {
                type: "folder",
                name: "cat",
                path: "/animals/cat",
                children: [
                    {
                        type: "folder",
                        name: "images",
                        path: "/animals/cat/images",
                        children: [
                            {
                                type: "file",
                                name: "cat001.jpg",
                                path: "/animals/cat/images/cat001.jpg"
                            }, {
                                type: "file",
                                name: "cat001.jpg",
                                path: "/animals/cat/images/cat002.jpg"
                            }
                        ]
                    }
                ]
            }
        ]
    }, {
        type: "folder",
        name: "fruits",
        path: "/fruits",
        children: [{
            type: "file",
            name: "cat001.jpg",
            path: "/animals/cat/images/cat001.jpg"
        }]
    }
];

У меня есть json. Я хочу показать структуру каталогов. Используя рекурсию, я могу получить все элементы. Я пытаюсь добавить ul и li, чтобы показать мою структуру каталогов для визуализации.

Я хочу, чтобы это выглядело так

root
    |_ fruits
    |___ apple
    |______images
    |________ apple001.jpg
    |________ apple002.jpg
    |_ animals
    |___ cat
    |______images
    |________ cat001.jpg
    |________ cat002.jpg

это выглядело так, используя ul и li

Я так пытался

function printDir(data) {
        if(!data) return null
        data.map((i) => {
            console.log(i.name)
            if (i.children && i.children.length > 0) {
                printDir(i.children)
            }
        })
    }

    printDir(data)

Answer 1

Вы можете присвоить методу printDir параметр родительского списка. А затем вы динамически создаете новые списки и элементы и добавляете их в родительский список. Может быть, так ...

function printDir(data, listElement) {
   if(!data) return null
   var list = document.createElement('ul')
   data.forEach((i) => {
      var item = document.createElement('li')
      item.appendChild(document.createTextNode(i.name));
      list.appendChild(item)
      if (i.children && i.children.length > 0) {
         printDir(i.children, list)
      }
   })
   listElement.appendChild(list)
}
printDir(data, document.body)

Также обратите внимание, что хотя технически карта массива будет работать, forEach здесь больше подходит. Карты предназначены для создания новых массивов.