我有这样的json
{
desc: "text",
nodes: [{
desc: "text1",
nodes: [
{desc: "text3"},
{desc: "text4"}
]},
{desc: "text2",
nodes: [
{desc: "text5"}
]}
]
}
我的问题是创建嵌套的html对象,如:
<div>
text
<div> text1
<div> text3 </div>
<div> text4 </div>
</div>
<div> text2
<div> text5 </div>
</div>
</div>
我在尝试
function buildTree(tree) {
let node = tree;
var el = document.createElement('div');
if (Array.isArray(node.nodes)) {
buildTree(node.nodes, el);
}
else if (typeof(node.nodes) == 'object') {
buildTree([node.nodes], el);
}
else {
el.innerHTML = node.desc;
}
}
buildTree(json_obj);
它可以是纯文本,(它很容易解析)但我无法处理这个问题,我正在尝试递归,但它都破坏了:/
祝你好运
答案 0 :(得分:0)
您缺少的是您没有将生成的el
附加到DOM,因此它已全部创建但从未附加。使用.appendChild(node)
来实现您的目标:
function buildTree(tree) {
let node = tree;
var el = document.createElement('div');
el.innerHTML = node.desc;
if (node.nodes) {
node.nodes.forEach(function(n) {
el.appendChild(buildTree(n));
});
}
return el;
}
var tree = buildTree(data);
document.querySelector('body').appendChild(tree);
见下面的概念验证:
var data = {
desc: "text",
nodes: [{
desc: "text1",
nodes: [{
desc: "text3"
},
{
desc: "text4"
}
]
},
{
desc: "text2",
nodes: [{
desc: "text5"
}]
}
]
};
function buildTree(tree) {
let node = tree;
var el = document.createElement('div');
el.innerHTML = node.desc;
if (node.nodes) {
node.nodes.forEach(function(n) {
el.appendChild(buildTree(n));
});
}
return el;
}
var tree = buildTree(data);
document.querySelector('body').appendChild(tree);
&#13;
div {
padding-left: 10px;
}
&#13;