关键词

JavaScript解析任意形式的json树型结构展示

为了解析任意形式的JSON树型结构,我们可以使用递归函数来实现。这里提供以下步骤:

  1. 获取JSON数据,并将其转换为JavaScript对象。
  2. 建立一个树形结构,通常使用ul和li元素,表示根节点和子节点。
  3. 创建递归函数。该函数将遍历树的节点,找到每个节点的子节点,并将它们添加到相应的父节点下。

以下是一个简单的示例:

假设我们有以下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树形数据,此处不再赘述。

本文链接:http://task.lmcjl.com/news/10686.html

展开阅读全文