1

如何构建与 react-sortable-tree 兼容的 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: ''}]);
4

1 回答 1

4

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

我采取了一个两步的方法，因为我不喜欢每次字典查找会更快时迭代一个子列表的想法。

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

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"
];

// Step 1:
// Convert the flat list of paths to nested dictionaries.
// (This representation is more efficient for the initial construction.)
// Basic algorithm:
// 1. Split each path into segments.
// 2. Walk down the tree using the segments as keys.
// 3. Create new nodes as necessary.

var tree = {};
filePaths.forEach(function (path) {
  var currentNode = tree;
  path.split('/').forEach(function (segment) {
    if (currentNode[segment] === undefined) {
      currentNode[segment] = {};
    }
    currentNode = currentNode[segment];
  });
});

// Now we have a tree represented as nested dictionaries.
console.log(JSON.stringify(tree, null, 2));

// {
//   "Diagnoses": {
//     "Endocrine disorders": {
//       "Thyroid disorders": {
//         "Congenital hypothyroidism": {},
//         "Acquired hypothyroidism": {
//           "Postsurgical hypothyroidism": {}
//         }
//       }
//     }
//   }
// }

// Step 2:
// Convert the nested dictionaries into lists of children.
// This is the format required for react-sortable-tree.
// Basic algorithm:
// 1. Each dictionary becomes an array of children.
// 2. Each element of the array has a title and a list of children.
// 3. We recurse for the list of children (if we have children).
function toTreeData(tree) {
  return Object.keys(tree).map(function (title) {
    var o = { title: title };
    if (Object.keys(tree[title]).length > 0) {
      o.children = toTreeData(tree[title]);
    }

    return o;
  });
}

console.log(JSON.stringify(toTreeData(tree), null, 2));

// [
//   {
//     "title": "Diagnoses",
//     "children": [
//       {
//         "title": "Endocrine disorders",
//         "children": [
//           {
//             "title": "Thyroid disorders",
//             "children": [
//               {
//                 "title": "Congenital hypothyroidism"
//               },
//               {
//                 "title": "Acquired hypothyroidism",
//                 "children": [
//                   {
//                     "title": "Postsurgical hypothyroidism"
//                   }
//                 ]
//               }
//             ]
//           }
//         ]
//       }
//     ]
//   }
// ]

于 2017-07-07T18:08:21.487 回答