如何将带parent_id的JSON响应转换为JSTree要求的标准格式

现有实现的核心偏差 #

• 误用了JSTree的数据格式要求，手动为节点拼接嵌套children数组，完全偏离了目标要求的平铺结构。JSTree的平铺数据模式不需要手动维护嵌套关系，仅靠每条记录的parent字段标识父子关系，组件即可自动完成树形结构渲染。
• 未处理字段类型转换，原始返回的id、parent_id均为数字类型，而JSTree要求这类节点标识必须为字符串类型，否则会出现父子节点匹配失效的问题。

正确实现思路 #

不需要编写多层判断做嵌套拼接，仅需对原始items数组做逐行字段映射和类型转换即可：

• 遍历原始数组的每一条记录，将id转为字符串作为节点的id字段，将原数据的name字段映射为节点要求的text字段。
• 处理父节点标识：若原始记录的parent_id为0（即最顶层根节点），对应parent字段固定赋值为JSTree约定的根标记#；其余场景将parent_id转为字符串，作为当前节点的parent值。
• 全程不构建任何嵌套children字段，所有处理后的记录平铺在同一数组中，即为符合要求的格式。

修正后的可运行代码 #

let test = {
  "items": [
    { "id": 1, "parent_id": 0, "name": "Root Catalog" },
    { "id": 2, "parent_id": 1, "name": "Default Category" },
    { "id": 3, "parent_id": 2, "name": "category1" },
    { "id": 5, "parent_id": 3, "name": "Sub1_category1" },
    { "id": 6, "parent_id": 3, "name": "Sub2_category1" },
    { "id": 11, "parent_id": 2, "name": "category2" },
    { "id": 12, "parent_id": 2, "name": "category3" },
    { "id": 14, "parent_id": 12, "name": "Sub1_category3" },
    { "id": 15, "parent_id": 12, "name": "Sub1_category4" }
  ]
}

function formatData(itemsList) {
  return itemsList.items.map(item => {
    // 顶层根节点固定使用JSTree约定的#作为父标识
    const parentField = item.parent_id === 0 
      ? '#' 
      : String(item.parent_id);

    return {
      id: String(item.id),
      parent: parentField,
      text: item.name
    }
  })
}

console.log(formatData(test))

输出校验 #

运行上述代码得到的结果：无多余嵌套children字段，所有id、parent字段均为字符串类型，根节点的父标识符合组件要求，可直接传入JSTree完成渲染。

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