JavaScript如何将服务端返回的JSON转换为TreeView适配的树形结构

转换实现方案 #

核心思路 #

通过递归处理任意层级的嵌套数据，匹配不同数据类型的转换规则，重点处理数字索引的隐式层级问题：

• 叶子节点识别：包含id_1/data_1/data_2三个属性的对象直接转换为TreeView的最终节点
• 数组处理：遍历所有元素递归转换，结果直接作为父节点的子节点列表
• 普通对象处理：遍历键值对，数字键对应的节点不需要单独作为层级，直接将值转换后合并到父节点子列表；非数字键作为节点文本，值递归转换后作为该节点的子节点

完整代码实现 #

// 递归转换函数
function transformToTree(data) {
  // 情况1：是叶子节点（包含指定的三个属性）
  if (typeof data === 'object' && data !== null && 'id_1' in data && 'data_1' in data && 'data_2' in data) {
    return [{
      text: `${data.data_1} ${data.data_2}`,
      val: data.id_1
    }]
  }
  // 情况2：是数组
  if (Array.isArray(data)) {
    let res = []
    for (let item of data) {
      res.push(...transformToTree(item))
    }
    return res
  }
  // 情况3：是普通对象
  if (typeof data === 'object' && data !== null) {
    let res = []
    for (let key in data) {
      const value = data[key]
      const children = transformToTree(value)
      // 判断是不是数字键，不需要单独生成节点
      if (/^\d+$/.test(key)) {
        res.push(...children)
      } else {
        res.push({
          text: key,
          children: children
        })
      }
    }
    return res
  }
  return []
}

// 调用示例，rawData就是你从服务端拿到的原始JSON
const treeObject = transformToTree(rawData)

注意：如果后续服务端返回的叶子节点字段（比如id_1/data_1）名称有调整，只需要修改叶子节点的判断条件和text拼接规则即可适配。

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