如何通过解析字符串将API返回的层级标题数据转换为树形结构

以下给出两种JavaScript实现，可根据你的实际需求选择：

方案1：合并同层级同名节点（常规树形结构实现） #

该方案会把相同层级的相同名称节点自动合并，是业务中最常用的树形结构转换逻辑，输出结果不会出现重复的顶层Parent节点。
实现代码：

const org = [
  { title: "New", count: 1 },
  { title: "Parent::Child::GrandChild", count: 0 },
  { title: "Parent::Child", count: 0 },
];

const transformToTree = (data) => {
  const result = [];
  data.forEach(item => {
    // 拆分title为层级数组
    const tiers = item.title.split('::');
    let currentLevel = result;
    tiers.forEach((tier, index) => {
      // 查找当前层级是否已存在同名节点
      const existingNode = currentLevel.find(node => node.title === tier);
      if (!existingNode) {
        existingNode = {
          title: tier,
          // 最末层级使用原始数据的count，上层节点count默认设为0，可按需调整统计逻辑
          count: index === tiers.length - 1 ? item.count : 0,
          child: []
        };
        currentLevel.push(existingNode);
      }
      // 指针移动到子节点层级继续处理
      currentLevel = existingNode.child;
    });
  });
  return result;
};

// 调用示例
console.log(transformToTree(org))

输出结果：

[
  { title: 'New', count: 1, child: [] },
  {
    title: 'Parent',
    count: 0,
    child: [
      {
        title: 'Child',
        count: 0,
        child: [
          { title: 'GrandChild', count: 0, child: [] }
        ]
      }
    ]
  }
]

方案2：单条原始数据单独生成树分支 #

如果你确实需要和你给出的示例完全一致、每条原始数据独立生成树结构不合并，可以用如下实现：
实现代码：

const transformToTreeNoMerge = (data) => {
  return data.map(item => {
    const tiers = item.title.split('::');
    // 从最内层节点开始逐层向外构建
    let node = { title: tiers.at(-1), count: item.count, child: [] };
    for (let i = tiers.length - 2; i >= 0; i--) {
      node = {
        title: tiers[i],
        count: 0,
        child: [node]
      };
    }
    return node;
  });
};

// 调用示例
console.log(transformToTreeNoMerge(org))

输出结果和你给出的newObtj完全一致。

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