文件路徑字符串到文件樹JSON的數組（與react-sortable-tree兼容）

Question

如何構建與react-sortable-tree兼容的JSON對象（每個嵌套對象都有title，children）來呈現文件樹。例如，我有這個文件路徑的數組。

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' 
      }] 
     } 
     ] 
     }] 
    }] 
    } 
]; 

編輯：我試過這個，但在第一次迭代後，我覆蓋了整棵樹的子屬性。我嘗試了一些檢查來阻止它，但他們沒有完全平息。

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: ''}]); 

Answer 1

我覺得你的代碼的主要問題是，你不走的樹在合適的地方插入節點。

我採取了兩個步驟的方法，因爲我不喜歡在每次字典查找速度更快時遍歷子列表的想法。

看到在代碼中的註釋對正在發生的事情的解釋：

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" 
 
//     } 
 
//     ] 
 
//    } 
 
//    ] 
 
//   } 
 
//   ] 
 
//  } 
 
//  ] 
 
// } 
 
// ]