如何自动生成树型json

如何自动生成树型JSON：从数据结构到实践方法

在软件开发中,树型JSON是一种常见的数据结构，广泛用于菜单系统、组织架构、评论层级、文件目录等场景，手动编写树型JSON不仅效率低，还容易因层级嵌套复杂而出错，本文将系统介绍如何自动生成树型JSON，从核心概念到具体实现方法，涵盖不同场景下的解决方案。

树型JSON的核心概念与数据结构特征

什么是树型JSON？

树型JSON是一种以嵌套结构表示层级关系的数据格式,通常包含“节点”和“层级”两个核心要素，一个简单的组织架构树型JSON如下：

{
  "id": 1,
  "name": "研发部",
  "children": [
    {
      "id": 2,
      "name": "前端组",
      "children": [
        {"id": 4, "name": "张三"},
        {"id": 5, "name": "李四"}
      ]
    },
    {
      "id": 3,
      "name": "后端组",
      "children": [
        {"id": 6, "name": "王五"}
      ]
    }
  ]
}

核心特征

• 层级关系：每个节点可能有父节点和子节点，顶层节点称为“根节点”，无子节点的节点称为“叶子节点”。
• 唯一标识：通常通过id字段标识节点唯一性，通过parentId字段关联父子关系。
• 嵌套结构：通过children字段（或其他自定义字段）存储子节点列表，形成递归嵌套。

自动生成树型JSON的核心思路

无论采用何种工具或语言,自动生成树型JSON的核心思路可归纳为以下三步：

数据准备：确保数据具备“父子关联”基础

原始数据需包含“节点唯一标识”和“父节点标识”字段，从数据库查询出的扁平化数据可能是这样的：

const flatData = [
  { id: 1, name: "研发部", parentId: null },
  { id: 2, name: "前端组", parentId: 1 },
  { id: 3, name: "后端组", parentId: 1 },
  { id: 4, name: "张三", parentId: 2 },
  { id: 5, name: "李四", parentId: 2 },
  { id: 6, name: "王五", parentId: 3 }
];

parentId为null或undefined的节点是根节点。

数据转换：通过“查表法”构建父子关系

核心逻辑是：遍历每个节点，根据其parentId找到对应的父节点，并将当前节点添加到父节点的children数组中，为提升效率，通常会先用一个“映射表”（如Map或对象）存储所有节点，通过O(1)时间复杂度查找父节点。

递归处理：处理无限层级嵌套

树型结构可能是无限层级（如无限级分类），因此需要递归处理：当一个节点有子节点时，递归为其子节点构建children结构，直到所有叶子节点都被处理。

具体实现方法：从原生JavaScript到工具库

方法1：原生JavaScript实现（通用性强）

步骤1：创建节点映射表

function buildTree(flatData) {
  // 创建节点映射表，key为节点id，value为节点对象
  const nodeMap = new Map();
  flatData.forEach(node => {
    nodeMap.set(node.id, { ...node, children: [] }); // 初始化children数组
  });
}

步骤2：构建父子关系

function buildTree(flatData) {
  const nodeMap = new Map();
  const roots = []; // 存储根节点
  // 初始化节点映射表
  flatData.forEach(node => {
    nodeMap.set(node.id, { ...node, children: [] });
  });
  // 构建父子关系
  flatData.forEach(node => {
    const currentNode = nodeMap.get(node.id);
    if (node.parentId === null || node.parentId === undefined) {
      roots.push(currentNode); // 根节点
    } else {
      const parentNode = nodeMap.get(node.parentId);
      if (parentNode) {
        parentNode.children.push(currentNode); // 添加到父节点的children
      }
    }
  });
  return roots;
}

步骤3：处理无限层级（递归优化）

如果数据存在无限层级（如分类的“父子分类”），上述方法已能处理，因为children数组会递归嵌套，完整代码：

const flatData = [
  { id: 1, name: "分类1", parentId: null },
  { id: 2, name: "分类1-1", parentId: 1 },
  { id: 3, name: "分类1-1-1", parentId: 2 },
  { id: 4, name: "分类2", parentId: null },
  { id: 5, name: "分类2-1", parentId: 4 }
];
function buildTree(flatData) {
  const nodeMap = new Map();
  const roots = [];
  flatData.forEach(node => {
    nodeMap.set(node.id, { ...node, children: [] });
  });
  flatData.forEach(node => {
    const currentNode = nodeMap.get(node.id);
    if (node.parentId === null) {
      roots.push(currentNode);
    } else {
      const parentNode = nodeMap.get(node.parentId);
      if (parentNode) {
        parentNode.children.push(currentNode);
      }
    }
  });
  return roots;
}
const treeData = buildTree(flatData);
console.log(JSON.stringify(treeData, null, 2));

输出结果：

[
  {
    "id": 1,
    "name": "分类1",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "分类1-1",
        "parentId": 1,
        "children": [
          {
            "id": 3,
            "name": "分类1-1-1",
            "parentId": 2,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 4,
    "name": "分类2",
    "parentId": null,
    "children": [
      {
        "id": 5,
        "name": "分类2-1",
        "parentId": 4,
        "children": []
      }
    ]
  }
]

方法2：使用Lodash（简化代码）

Lodash提供了_.keyBy和_.filter等工具，可简化树型结构的构建。

const _ = require('lodash');
function buildTreeWithLodash(flatData) {
  // 创建节点映射表
  const nodeMap = _.keyBy(flatData, 'id');
  const roots = [];
  flatData.forEach(node => {
    const parentNode = node.parentId ? nodeMap[node.parentId] : null;
    if (parentNode) {
      if (!parentNode.children) {
        parentNode.children = [];
      }
      parentNode.children.push(node);
    } else {
      roots.push(node);
    }
  });
  return roots;
}
const treeData = buildTreeWithLodash(flatData);
console.log(JSON.stringify(treeData, null, 2));

Lodash的优势在于代码更简洁,且内置了深拷贝、数组操作等优化，适合复杂场景。

方法3：数据库层面生成（适用于后端服务）

如果数据存储在关系型数据库（如MySQL）中，可通过“递归查询”直接生成树型JSON，减少后端代码处理逻辑，以MySQL为例：

方案1：使用WITH RECURSIVE（MySQL 8.0+）

WITH RECURSIVE tree AS (
  -- 基础查询：选择根节点
  SELECT id, name, parentId, JSON_ARRAYAGG(
    JSON_OBJECT(
      'id', id,
      'name', name,
      'children', (
        -- 递归查询子节点
        SELECT JSON_ARRAYAGG(
          JSON_OBJECT(
            'id', t2.id,
            'name', t2.name,
            'children', (
              SELECT JSON_ARRAYAGG(
                JSON_OBJECT('id', t3.id, 'name', t3.name)
              )
              FROM categories t3
              WHERE t3.parentId = t2.id
            )
          )
        )
        FROM categories t2
        WHERE t2.parentId = t1.id
      )
    )
  ) AS children
  FROM categories t1
  WHERE t1.parentId IS NULL
  GROUP BY t1.id
)
SELECT * FROM tree;

此查询会直接返回树型JSON结构,适合需要数据库直接返回树型数据的场景。

方案2：使用存储过程（兼容旧版MySQL）

DELIMITER //
CREATE PROCEDURE build_tree_json