Я написал функцию для создания дерева HTML из JSON.
async function traverseTree (list, node) {
const li = document.createElement('li')
if (node.kids) {
const
ul = document.createElement('ul'),
span = document.createElement('span')
span.innerText = node.name
li.appendChild(span)
li.appendChild(ul)
list.appendChild(li)
for (const kid of node.kids) {
traverse(ul, kid)
}
return list
}
li.innerText = node.name
list.appendChild(li)
return list
}
;(async function(){
const
tree = await readJson('./tree.json'),
list = document.createElement('ul'),
output = await traverseTree(list, tree)
console.log(output)
})()
Проблема в том, что я не хочу отображать корневой узел в дереве HTML, поскольку он уже отображается в другом месте. поэтому я изменил код, чтобы исключить его.
async function traverseTree (list, node, isNotRoot) { // additional parameter
const li = document.createElement('li')
if (node.kids) {
let ul = list // now let
if (isNotRoot) { // additional conditional
const span = document.createElement('span')
ul = document.createElement('ul') // additional assignment of value
span.innerText = node.name
li.appendChild(span)
li.appendChild(ul)
list.appendChild(li)
}
for (const kid of node.kids) {
traverseTree(ul, kid, true) // additional argument
}
return list
}
li.innerText = node.name
list.appendChild(li)
return list
}
Мне интересно, есть ли лучший, более чистый способ сделать это?