如何递归合并JSON树相同节点并嵌套归集同父元素

我有一个多层嵌套的JSON数组，其中存在重复的父节点（相同id和label），需要将这些重复节点合并，同时递归检查并合并其子节点，最终生成无重复的树形结构，用于PrimeNG Tree组件展示。

原始JSON数组 #

var jsonArray = [
{
  label: 'Parent 1',
  id: '26',
  children: [
    {
      label: 'child 11',
      id: '139',
      children: [
        {
          label: 'child 111',
          id: '558',
          children: [
            {
              label: 'child 1111',
              id: '1420',
            },
          ],
        },
      ],
    },
  ],
},
{
  label: 'Parent 2',
  id: '24',
  children: [
    {
      label: 'child 21',
      id: '140',
      children: [
        {
          label: 'child 211',
          id: '142',
          children: [
            {
              label: 'child 2111',
              id: '4394',
            },
          ],
        },
      ],
    },
  ],
},
{
  label: 'Parent 3',
  id: '154',
  children: [
    {
      label: 'child 31',
      id: '161',
      children: [
        {
          label: 'child 311',
          id: '260',
          children: [
            {
              label: 'child 3111',
              id: '1837',
            },
          ],
        },
      ],
    },
  ],
},
{
  label: 'Parent 1',
  id: '26',
  children: [
    {
      label: 'child 11',
      id: '139',
      children: [
        {
          label: 'child 112',
          id: '470',
          children: [
            {
              label: 'child 1121',
              id: '957',
            },
          ],
        },
      ],
    },
  ],
},
];

期望合并后的树形结构 #

[
    {
      label: 'Parent 1',
      id: '26',
      children: [
        {
          label: 'child 11',
          id: '139',
          children: [
            {
              label: 'child 111',
              id: '558',
              children: [
                {
                  label: 'child 1111',
                  id: '1420',
                },
              ],
            },
            {
              label: 'child 112',
              id: '470',
              children: [
                {
                  label: 'child 1121',
                  id: '957',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      label: 'Parent 2',
      id: '24',
      children: [
        {
          label: 'child 21',
          id: '140',
          children: [
            {
              label: 'child 211',
              id: '142',
              children: [
                {
                  label: 'child 2111',
                  id: '4394',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      label: 'Parent 3',
      id: '154',
      children: [
        {
          label: 'child 31',
          id: '161',
          children: [
            {
              label: 'child 311',
              id: '260',
              children: [
                {
                  label: 'child 3111',
                  id: '1837',
                },
              ],
            },
          ],
        },
      ],
    }
  ];

解决方案 #

核心思路 #

以节点的id作为唯一标识，通过递归遍历实现层级合并：

1. 遍历当前层级节点，检查是否已存在相同id的节点
2. 存在则递归合并两者的children数组，不存在则直接添加节点到结果集
3. 递归处理所有嵌套层级，确保每一层重复节点都被合并

实现代码（TypeScript/JavaScript） #

interface TreeNode {
  label: string;
  id: string;
  children?: TreeNode[];
}

function mergeTreeNodes(nodes: TreeNode[]): TreeNode[] {
  const merged: TreeNode[] = [];

  nodes.forEach(node => {
    // 查找当前层级是否已有相同id的节点
    const existingNode = merged.find(n => n.id === node.id);
    
    if (existingNode) {
      // 合并children：递归处理两组子节点
      existingNode.children = mergeTreeNodes([
        ...(existingNode.children || []),
        ...(node.children || [])
      ]);
    } else {
      // 深拷贝节点避免修改原数据，递归处理子节点后加入结果
      const newNode = { ...node };
      if (newNode.children) {
        newNode.children = mergeTreeNodes(newNode.children);
      }
      merged.push(newNode);
    }
  });

  return merged;
}

// 使用示例
const mergedTree = mergeTreeNodes(jsonArray);

代码说明 #

• TreeNode接口：匹配PrimeNG Tree组件的节点结构，确保类型兼容
• mergeTreeNodes函数：
  • 初始化结果数组存储合并后的节点
  • 通过id判断节点是否重复，避免同层级重复节点
  • 递归合并子节点，保证嵌套层级的重复节点也被处理
  • 深拷贝节点，防止修改原始数据

验证结果 #

运行代码后得到的mergedTree即为目标树形结构，可直接传入PrimeNG Tree组件的value属性使用。

内容的提问来源于stack exchange，提问作者medah