使用n级嵌套JSON对象在HTML中创建树结构可以通过以下步骤实现:
var treeData = [
{
id: 1,
name: "Node 1",
children: [
{
id: 2,
name: "Node 1.1",
children: [
{
id: 3,
name: "Node 1.1.1",
children: []
},
{
id: 4,
name: "Node 1.1.2",
children: []
}
]
},
{
id: 5,
name: "Node 1.2",
children: []
}
]
},
{
id: 6,
name: "Node 2",
children: []
}
];
function createTree(node, children) {
var html = '<li>' + node.name;
if (children.length > 0) {
html += '<ul>';
for (var i = 0; i < children.length; i++) {
html += createTree(children[i], children[i].children);
}
html += '</ul>';
}
html += '</li>';
return html;
}
var treeHtml = '<ul>' + createTree(treeData[0], treeData[0].children) + '</ul>';
document.getElementById("treeContainer").innerHTML = treeHtml;
这样,使用n级嵌套JSON对象在HTML中创建树结构的过程就完成了。可以根据实际需求对生成的HTML代码进行样式和交互的定制。
领取专属 10元无门槛券
手把手带您无忧上云