json 树状展示,json tree：代码示例

JSON树状展示是一种将JSON数据以树形结构展示的方式，使得数据更加清晰易读。在JSON树状展示中，每个节点都代表一个JSON对象或数组，而子节点则代表该节点的属性或元素。

我们可以通过递归的方式遍历JSON数据，将每个节点转换为树的节点。在遍历过程中，我们需要判断当前节点的类型，如果是对象，则将其属性作为子节点添加到树中；如果是数组，则将其元素作为子节点添加到树中。

以下是一个示例代码，展示了如何将JSON数据以树状结构展示：

function renderTree(data, parentNode) {
  // 遍历JSON数据
  for (let key in data) {
    // 创建当前节点
    let currentNode = document.createElement('li');
    // 设置节点的文本内容
    let nodeText = document.createTextNode(key);
    currentNode.appendChild(nodeText);
    // 判断当前节点的类型
    if (typeof data[key] === 'object') {
      // 如果是对象，则递归调用renderTree函数，将当前节点作为父节点
      renderTree(data[key], currentNode);
    } else {
      // 如果是基本类型，则直接将其值作为子节点添加到树中
      let valueNode = document.createElement('span');
      let valueText = document.createTextNode(data[key]);
      valueNode.appendChild(valueText);
      currentNode.appendChild(valueNode);
    }
    // 将当前节点添加到父节点中
    parentNode.appendChild(currentNode);
  }
}
// 示例JSON数据
let jsonData = {
  "name": "John",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  "friends": ["Alice", "Bob"]
};
// 创建树的根节点
let root = document.createElement('ul');
// 调用renderTree函数，将JSON数据转换为树状结构
renderTree(jsonData, root);
// 将树添加到页面中
document.body.appendChild(root);

通过以上示例代码，我们可以将JSON数据以树状结构展示在页面上。每个节点代表一个属性或元素，子节点表示该节点的属性或元素。这种展示方式使得JSON数据更加易读和理解。