为了解析任意形式的JSON树型结构，我们可以使用递归函数来实现。这里提供以下步骤：
- 获取JSON数据，并将其转换为JavaScript对象。
- 建立一个树形结构，通常使用ul和li元素，表示根节点和子节点。
- 创建递归函数。该函数将遍历树的节点，找到每个节点的子节点，并将它们添加到相应的父节点下。
以下是一个简单的示例：
假设我们有以下JSON数据：
{
"id": 1,
"name": "Parent",
"children": [
{
"id": 2,
"name": "Child1"
},
{
"id": 3,
"name": "Child2",
"children": [
{
"id": 4,
"name": "GrandChild1"
},
{
"id": 5,
"name": "GrandChild2"
}
]
}
]
}
我们可以将其转换为JavaScript对象：
const data = {
"id": 1,
"name": "Parent",
"children": [
{
"id": 2,
"name": "Child1"
},
{
"id": 3,
"name": "Child2",
"children": [
{
"id": 4,
"name": "GrandChild1"
},
{
"id": 5,
"name": "GrandChild2"
}
]
}
]
};
接下来我们需要创建树的根元素，并为每个节点创建ul和li元素：
const treeRoot = document.createElement('ul');
const parentNode = document.createElement('li');
const child1Node = document.createElement('li');
const child2Node = document.createElement('li');
const grandChild1Node = document.createElement('li');
const grandChild2Node = document.createElement('li');
treeRoot.appendChild(parentNode);
parentNode.appendChild(child1Node);
parentNode.appendChild(child2Node);
child2Node.appendChild(grandChild1Node);
child2Node.appendChild(grandChild2Node);
现在我们可以创建递归函数来遍历节点，并将子节点添加到它们的父节点中：
function createTreeNode(node, parentNode) {
const newNode = document.createElement('li');
const nodeText = document.createTextNode(node.name);
newNode.appendChild(nodeText);
parentNode.appendChild(newNode);
if (node.children && node.children.length > 0) {
const childList = document.createElement('ul');
newNode.appendChild(childList);
node.children.forEach(childNode => {
createTreeNode(childNode, childList);
});
}
}
createTreeNode(data, treeRoot);
这个递归函数将从根节点开始遍历树，为每个节点创建一个li元素，并将它添加到相应的父节点中。如果节点具有子节点，它会创建一个ul元素，并继续遍历节点。
下面是使用上述函数显示示例JSON数据的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Tree Example</title>
</head>
<body>
<div id="tree"></div>
<script>
const data = {
"id": 1,
"name": "Parent",
"children": [
{
"id": 2,
"name": "Child1"
},
{
"id": 3,
"name": "Child2",
"children": [
{
"id": 4,
"name": "GrandChild1"
},
{
"id": 5,
"name": "GrandChild2"
}
]
}
]
};
const treeRoot = document.createElement('ul');
function createTreeNode(node, parentNode) {
const newNode = document.createElement('li');
const nodeText = document.createTextNode(node.name);
newNode.appendChild(nodeText);
parentNode.appendChild(newNode);
if (node.children && node.children.length > 0) {
const childList = document.createElement('ul');
newNode.appendChild(childList);
node.children.forEach(childNode => {
createTreeNode(childNode, childList);
});
}
}
createTreeNode(data, treeRoot);
document.getElementById('tree').appendChild(treeRoot);
</script>
</body>
</html>
运行这个代码后，您将在页面上看到一棵包含所有节点的树形结构。
另外一个示例是一个更复杂的JSON数据。假设我们有以下JSON数据：
{
"id": 1,
"name": "Parent",
"children": [
{
"id": 4,
"name": "Child1",
"children": [
{
"id": 11,
"name": "GrandChild1",
"children": [
{
"id": 21,
"name": "GreatGrandChild1",
"children": [
{
"id": 31,
"name": "GreatGreatGrandChild1"
}
]
},
{
"id": 22,
"name": "GreatGrandChild2",
"children": [
{
"id": 32,
"name": "GreatGreatGrandChild2"
}
]
}
]
},
{
"id": 12,
"name": "GrandChild2",
"children": [
{
"id": 23,
"name": "GreatGrandChild3",
"children": [
{
"id": 33,
"name": "GreatGreatGrandChild3"
}
]
},
{
"id": 24,
"name": "GreatGrandChild4",
"children": [
{
"id": 34,
"name": "GreatGreatGrandChild4"
}
]
}
]
}
]
},
{
"id": 5,
"name": "Child2",
"children": [
{
"id": 13,
"name": "GrandChild3",
"children": [
{
"id": 25,
"name": "GreatGrandChild5",
"children": [
{
"id": 35,
"name": "GreatGreatGrandChild5"
}
]
},
{
"id": 26,
"name": "GreatGrandChild6",
"children": [
{
"id": 36,
"name": "GreatGreatGrandChild6"
}
]
}
]
},
{
"id": 14,
"name": "GrandChild4",
"children": [
{
"id": 27,
"name": "GreatGrandChild7",
"children": [
{
"id": 37,
"name": "GreatGreatGrandChild7"
}
]
},
{
"id": 28,
"name": "GreatGrandChild8",
"children": [
{
"id": 38,
"name": "GreatGreatGrandChild8"
}
]
}
]
}
]
}
]
}
可以使用上面相同的方法来解析并显示任意JSON树形数据，此处不再赘述。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript解析任意形式的json树型结构展示 - Python技术站
微信扫一扫 
支付宝扫一扫 