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树形数据,此处不再赘述。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript解析任意形式的json树型结构展示 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • CocosCreator入门教程之用TS制作第一个游戏

    Cocos Creator是一个非常优秀的游戏开发引擎,支持多平台的游戏开发。本文将介绍如何使用Cocos Creator和TypeScript(TS)来创建第一个简单的游戏。 准备工作 在开始之前,需要做以下准备工作: 下载安装Cocos Creator:可以在Cocos官网上下载对应的版本,根据自己的实际情况选择对应的操作系统和版本号。 安装好之后,打开…

    JavaScript 2023年6月10日
    00
  • js判断密码强度的方法

    下面是我对“JS判断密码强度的方法”的详细讲解: 什么是密码强度 在IT安全中,密码强度通常表示密码难度的大小。密码强度越高,密码的破解难度就越高,数据的安全性就越高。一个安全的密码强度应该至少包括数字、字母和符号,并且长度应该大于8位。 JS 判断密码强度的方法 1. 简单版判断密码强度 最简单的判断密码强度的方法就是根据密码长度来决定密码强度。以下是简单…

    JavaScript 2023年6月10日
    00
  • jquery实现简单的表单验证

    下面是jQuery实现简单的表单验证的完整攻略: 1. 导入jQuery库文件 要使用jQuery,首先需要在页面头部导入jQuery库文件,可以从官网下载或直接使用CDN加速链接。示例: <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jque…

    JavaScript 2023年6月10日
    00
  • js检测浏览器夜晚/黑暗(dark)模式方法

    如何检测浏览器的夜晚/黑暗模式 当用户在电脑或手机等浏览器中将主题从白天模式切换到黑夜模式时,浏览器会触发媒体查询 prefers-color-scheme。我们可以利用 JavaScript 检测媒体查询条件,推断出当前是白天还是黑夜模式。 检测浏览器是否支持 prefers-color-scheme 媒体查询 在使用 prefers-color-sche…

    JavaScript 2023年6月10日
    00
  • javascript获取系统当前时间的方法

    获取系统当前时间是JavaScript常见的操作之一,可以使用JavaScript内置的Date对象实现。下面是获取系统当前时间的方法攻略: 1.使用 Date 对象 创建 Date 对象后,我们可以通过调用其方法来获取相应的时间信息。 const now = new Date(); //创建一个 Date 对象 const year = now.getFu…

    JavaScript 2023年5月27日
    00
  • 深入理解setTimeout函数和setInterval函数

    深入理解setTimeout函数和setInterval函数攻略 JavaScript 的 setTimeout 和 setInterval 函数是在开发中经常使用的工具,它们都可以用来延时执行某些代码。虽然看上去它们很简单,但是深入理解它们的原理和用法确实很重要,本文将从下面三个方面进行介绍: setTimeout 和 setInterval 函数的基本用…

    JavaScript 2023年6月11日
    00
  • JS运动特效之完美运动框架实例分析

    下面是详细讲解完美运动框架实例分析的攻略: JS运动特效之完美运动框架实例分析 一、简介 完美运动框架是一款优秀的JS运动特效库,可以实现多种运动效果,如匀速运动、缓冲运动等等。本篇文章将从实例分析的角度出发,介绍完美运动框架的常规用法以及一些细节问题。 二、常规用法 1. 引入完美运动框架 完美运动框架是一个单独的JS文件,需要在HTML文件中引入才能使用…

    JavaScript 2023年6月11日
    00
  • js使用Replace结合正则替换重复出现的字符串功能示例

    当我们需要对字符串进行批量操作时,JavaScript中的replace()方法结合正则表达式可以轻松地实现此功能。在进行大规模字符串处理时这个方法非常的有用。 Replace方法的基础使用 replace()方法是针对一个字符串中的某些内容进行替换操作的。基本的用法是:使用一个字符串作为参数(第一个参数),该字符串中包含需要查找的内容,并通过另一个字符串(…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部