使用javascript的數組路徑的樹結構

Question

我得到了下面給出的json結構，它包含一個數組窗體中相關子項的路徑。 例如，這裏是我的JSON結構

[ 
    { 
    "name": "Children C1", 
    "path": [ 
     "A", 
     "B", 
     "C" 
    ] 
    }, 
    { 
    "name": "Children C2", 
    "path": [ 
     "A", 
     "B", 
     "C" 
    ] 
    }, 
    { 
    "name": "Children C3", 
    "path": [ 
     "A", 
     "B", 
     "C" 
    ] 
    }, 
    { 
    "name": "Children B1", 
    "path": [ 
     "A", 
     "B" 
    ] 
    }, 
    { 
    "name": "Children B2", 
    "path": [ 
     "A", 
     "B" 
    ] 
    }, 
    { 
    "name": "Children A1", 
    "path": [ 
     "A" 
    ] 
    }, 
    { 
    "name": "Children E1", 
    "path": [ 
     "D", 
     "E" 
    ] 
    } 
] 

以下路徑是一個childeren的路線。例如第一對象裝置 -A -B -C - Childeren C1

等。我正在使用只需要這種結構的樹型視圖庫

var tree=[ 
    { 
    'Name': 'A', 
    'children': [ 
     { 
     Name: '', 
     children: [ 

     ] 
     } 
    ] 
    } 
] 

等等。我想將我的路徑結構轉換爲樹。需要幫助我可以用簡單的javasript來實現這一點。

由於

Answer 1

var result=input.reduce((obj,el)=>{ 
var orig=obj; 
    for(key of el.path){ 
    var found=obj.find(e=>e.name===key); 
    if(found){ 
     obj=found.children; 
    }else{ 
     var temp={name:key, children:[]}; 
     obj.push(temp); 
     obj=temp.children; 
    } 
} 
obj.push(el.name); 
return orig; 
},[]); 

http://jsbin.com/cowowisaji/edit?console

它創建下列結構：

[{ 
    name:"A", 
    children:[ 
    "Children A1", 
    {name:B", children:[...]} 
    ] 
}] 

它只是簡單地迭代的所有元素，解析該軌跡槽搜索正確的路徑對象中的陣列，如果一個路徑元素不存在，它會創建它。

上的代碼可以shortified到：

var result=input.reduce((obj,el)=>(el.path.reduce((path,name)=>(path.find(e=>e.name==name)||(path[path.length]={name:name,children:[]})).children,obj).push(el.name),obj),[]); 

Answer 2

與保持參考命名對象輔助對象只是另一種方法。

var data = [{ name: "Children C1", path: ["A", "B", "C"] }, { name: "Children C2", path: ["A", "B", "C"] }, { name: "Children C3", path: ["A", "B", "C"] }, { name: "Children B1", path: ["A", "B"] }, { name: "Children B2", path: ["A", "B"] }, { name: "Children A1", path: ["A"] }, { name: "Children E1", path: ["D", "E"] }], 
 
    tree = function (array) { 
 
     var result = [], 
 
      o = { _: result }; 
 

 
     array.forEach(function (a) { 
 
      a.path.concat(a.name).reduce(function (r, b) { 
 
       if (!r[b]) { 
 
        r[b] = { _: [] }; 
 
        r._.push({ name: b, children: r[b]._ }); 
 
       } 
 
       return r[b]; 
 
      }, o); 
 
     }); 
 
     return result; 
 
    }(data); 
 

 
console.log(tree);

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