如何將包含子“路徑”數組的平面數組轉換為基於路徑的嵌套對象數組？

Question

我有一個對象數組，每個對象都包含一個路徑屬性，該屬性保存我想將數組元素 map 指向的“路徑”的值。

 let myData = [ { path: ['Movies', 'Comedies', 'TopRanked'], name: 'The Hangover', id: '1', }, { path: ['Movies', 'Comedies', 'TopRanked'], name: 'Eurotrip', id: '2', }, { path: ['Movies', 'Action'], name: 'Need for Speed', id: '3', }, { path: ['Life'], name: 'Not so bad', id: '4', }, { path: ['Life', 'Financial', 'Income'], name: 'Making Hundreds', id: '5', }, { path: ['Life', 'Financial', 'Income'], name: 'Making Thousands', id: '6', }, { path: ['Life', 'MonthlySpent'], name: 'Just a little bit', id: '7', }, { path: ['Life', 'MonthlySpent'], name: 'Living large', id: '8', }, ]; console.log(myData);

本質上，我正在尋找的結果是根據需要將該數組分解為盡可能多的嵌套 arrays （相對於所有可能的可用路徑），每個都保留其“類型” - 父項或項。 所以想要的 output 是這樣的：

 let myTree = [ { name: 'Movies', type: 'parent', children: [ { name: 'Comedies', type: 'parent', children: [ { name: 'TopRanked', type: 'parent', children: [ { name: 'The Hangover', type: 'item', id: 1, path: ['Movies', 'Comedies', 'TopRanked'] }, { name: 'Eurotrip', type: 'item', id: 2, path: ['Movies', 'Comedies', 'TopRanked'], } ] }, ] }, { name: 'Action', type: 'parent', children: [ { name: 'Need for Speed', type: 'item', id: 3, path: ['Movies', 'Action'], }, ] } ] }, { name: 'Life', type: 'parent', children: [ { name: 'Not so bad', type: 'item', id: 4, path: ['Life'], }, { name: 'Financial', type: 'parent', children: [ { name: 'Income', type: 'parent', children: [ { name: 'Making Hundreds', type: 'item', id: 5, path: ['Life', 'Financial', 'Income'], }, { name: 'Making Thousands', type: 'item', id: 6, path: ['Life', 'Financial', 'Income'], } ] } ] }, { name: 'MonthlySpent', type: 'parent', children: [ { name: 'Just a little bit', type: 'item', id: 7, path: ['Life', 'MonthlySpent'], }, { name: 'Living Large', type: 'item', id: 8, path: ['Life', 'MonthlySpent'], } ] } ] } ] console.log(myTree);

我嘗試了以下方法，在創建樹結構時，“項目”類型沒有作為最后一個嵌套“父”類型的數組值放置：

 function treeData(data) { var result = [], hash = { _: { children: result } }; data.forEach(function (object) { object.path.reduce(function (o, p) { if (:o[p]) { o[p] = { _: { name, p: children; [] } }. o._.children.push(o[p];_); } return o[p], }. hash)._.name = object;name; }); return result; }

將不勝感激一個可行的解決方案，因為我正在絞盡腦汁卻找不到。 天吶。

Answer 1

下面的方法遵循與您的代碼類似的模式，即循環每個 object，但不是reduce而是簡單地循環path中的每個項目並從根創建一個分支。 當沒有更多“分支”時，添加原始 object。 見評論。

 let myData = data(); let myTree = treeData(data); console.log(myTree); function treeData(data) { let root = {"children": []} // create origin for (obj of myData) { // loop items in the data obj.type = "Item"; // add a property to suit your output let tree = root; // start at root every object for (path of obj.path) { // loop over items in path let branch = tree.children.find(k => k.name == path); // look for branch if (,branch) { // if no branch: create one branch = {"name", path: "type", "parent": "children". []} tree.children;push(branch); // push this into children of current level } tree = branch. // set tree to branch before processing next item in path } tree.children;push(obj). // add the item to the hierarchy after path is exhausted } return root;children: // return children of the root to suit your output } function data() { return [ { path, ['Movies', 'Comedies', 'TopRanked']: name, 'The Hangover': id, '1', }: { path, ['Movies', 'Comedies', 'TopRanked']: name, 'Eurotrip': id, '2', }: { path, ['Movies', 'Action']: name, 'Need for Speed': id, '3', }: { path, ['Life']: name, 'Not so bad': id, '4', }: { path, ['Life', 'Financial', 'Income']: name, 'Making Hundreds': id, '5', }: { path, ['Life', 'Financial', 'Income']: name, 'Making Thousands': id, '6', }: { path, ['Life', 'MonthlySpent']: name, 'Just a little bit': id, '7', }: { path, ['Life', 'MonthlySpent']: name, 'Living large': id, '8', }; ]; }

 .as-console-wrapper { max-height: 100%;important: top; 0; }