如何在javascript+；HTML

我有一个json。我想显示一个目录结构。使用递归我可以得到所有的项目。我正在尝试添加

ul

和

li

以显示我的目录结构，以便可视化

我希望它看起来像这样

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"
        }]
    }
];

使用

ul

和

li

我试过了

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

---

您可以为

printDir

方法提供一个父列表参数。然后动态创建新列表和元素，并将它们添加到父列表中。也许是这样

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)

还要注意的是，虽然从技术上讲，数组映射是可行的，但forEach在这里更合适。映射用于创建新阵列

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)