Javascript 文件树JSON的文件路径字符串数组（与react可排序树兼容）

如何构建与react可排序树兼容的JSON对象（每个嵌套对象都有标题、子对象）来呈现文件树

例如，我有这个文件路径数组

var filePaths = [
   "Diagnoses/Endocrine disorders/Thyroid disorders/Congenital hypothyroidism",
   "Diagnoses/Endocrine disorders/Thyroid disorders/Acquired hypothyroidism",
   "Diagnoses/Endocrine disorders/Thyroid disorders/Acquired hypothyroidism/Postsurgical hypothyroidism"
];

我想要一个像这样的JSON对象

var treeData = [
  {
    title: 'Diagnoses',
    children: [{
      title: 'Endocrine disorders',
      children: [{
        title: 'Thyroid disorders',
        children: [
        {
          title: 'Congential hypothyroidism'
        },
        {
          title: 'Acquired hypothyroidism',
          children: [{
            title: 'Postsurgical hypothyroidism'
          }]
        }
        ]
      }]
    }]
  }
];

编辑：我试过了，但是在第一次迭代之后，我覆盖了整个树的children属性。我试着做了几次检查以阻止这种情况的发生，但都没有成功

var hierarchy = filePaths.reduce(function(hier,path){
    var x = hier;
    path.split('/').forEach(function(item, index, array){
        if(x[0].title != item){
            x[0].title = item;
        }
        // console.log(index, array.length)
        if (index != array.length - 1 && !x[0].children){
          x[0].children = [{
            title: ''
          }];
        }
        x = x[0].children;
    });

    return hier;
}, [{title: ''}]);

---

我认为您的代码的主要问题是您没有在树上的正确位置插入节点

我采取了两步的方法，因为我不喜欢每次在字典查找速度更快的情况下遍历一系列子项的想法

请参阅代码中的注释以了解发生的情况：

var文件路径=[
“诊断/内分泌疾病/甲状腺疾病/先天性甲状腺功能减退”，
“诊断/内分泌疾病/甲状腺疾病/获得性甲状腺功能减退”，
“诊断/内分泌疾病/甲状腺疾病/获得性甲状腺功能减退/术后甲状腺功能减退”
];
//步骤1：
//将路径的平面列表转换为嵌套字典。
//（对于初始构造，此表示更有效。）
//基本算法：
// 1. 将每条路径拆分为段。
// 2. 使用线段作为关键点沿树向下走。
// 3. 根据需要创建新节点。
var-tree={}；
forEach（函数（路径）{
var currentNode=树；
path.split（'/'）.forEach（函数（段）{
if（当前节点[段]==未定义）{
currentNode[段]={}；
}
currentNode=currentNode[段]；
});
});
//现在，我们有了一个表示为嵌套字典的树。
log（JSON.stringify（tree，null，2））；
// {
//“诊断”：{
//“内分泌失调”：{
//“甲状腺疾病”：{
//“先天性甲状腺功能减退症”：{}，
//“获得性甲状腺功能减退症”：{
//“术后甲状腺功能减退症”：{}
//         }
//       }
//     }
//   }
// }
//步骤2：
//将嵌套字典转换为子字典列表。
//这是react可排序树所需的格式。
//基本算法：
// 1. 每本字典都成为一个子字典数组。
// 2. 数组的每个元素都有一个标题和子元素列表。
// 3. 我们递归子对象列表（如果我们有子对象）。
函数toTreeData（树）{
返回对象.键（树）.映射（函数（标题）{
var o={title:title}；
if（Object.keys（树[标题]）长度>0）{
o、 children=toTreeData（树[标题]）；
}
返回o；
});
}
log（JSON.stringify（toTreeData（tree），null，2））；
// [
//   {
//“标题”：“诊断”，
//“儿童”：[
//       {
//“标题”：“内分泌失调”，
//“儿童”：[
//           {
//“标题”：“甲状腺疾病”，
//“儿童”：[
//               {
//标题：“先天性甲状腺功能减退症”
//               },
//               {
//“标题”：“获得性甲状腺功能减退症”，
//“儿童”：[
//                   {
//“标题”：“术后甲状腺功能减退”
//                   }
//                 ]
//               }
//             ]
//           }
//         ]
//       }
//     ]
//   }
//]

我认为您的代码的主要问题是您没有在树上的正确位置插入节点

我采取了两步的方法，因为我不喜欢每次在字典查找速度更快的情况下遍历一系列子项的想法

请参阅代码中的注释以了解发生的情况：

var文件路径=[
“诊断/内分泌疾病/甲状腺疾病/先天性甲状腺功能减退”，
“诊断/内分泌疾病/甲状腺疾病/获得性甲状腺功能减退”，
“诊断/内分泌疾病/甲状腺疾病/获得性甲状腺功能减退/术后甲状腺功能减退”
];
//步骤1：
//将路径的平面列表转换为嵌套字典。
//（对于初始构造，此表示更有效。）
//基本算法：
// 1. 将每条路径拆分为段。
// 2. 使用线段作为关键点沿树向下走。
// 3. 根据需要创建新节点。
var-tree={}；
forEach（函数（路径）{
var currentNode=树；
path.split（'/'）.forEach（函数（段）{
if（当前节点[段]==未定义）{
currentNode[段]={}；
}
currentNode=currentNode[段]；
});
});
//现在，我们有了一个表示为嵌套字典的树。
log（JSON.stringify（tree，null，2））；
// {
//“诊断”：{
//“内分泌失调”：{
//“甲状腺疾病”：{
//“先天性甲状腺功能减退症”：{}，
//“获得性甲状腺功能减退症”：{
//“术后甲状腺功能减退症”：{}
//         }
//       }
//     }
//   }
// }
//步骤2：
//将嵌套字典转换为子字典列表。
//这是react可排序树所需的格式。
//基本算法：
// 1. 每本字典都成为一个子字典数组。
// 2. 数组的每个元素都有一个标题和子元素列表。
// 3. 我们递归子对象列表（如果我们有子对象）。
函数toTreeData（树）{
返回对象.键（树）.映射（函数（标题）{
var o={title:title}；
if（Object.keys（树[标题]）长度>0）{
o、 children=toTreeData（树[标题]）；
}
返回o；
});
}
log（JSON.stringify（toTreeData（tree），null，2））；
// [
//   {
//“标题”：“诊断”，
//“儿童”：[
//       {
//“标题”：“内分泌失调”，
//“儿童”：[
//           {
//“标题”：“甲状腺疾病”，
//“儿童”：[
//               {
//标题：“先天性甲状腺功能减退症”
//               },
//               {
//“标题”：“获得性甲状腺功能减退症”，
//“儿童”：[
//                   {
//                     "