2017-05-25 13 views
2

以下のようなjson構造が、配列形式の関連する子のパスを含むapiを取得しています。例えば は、ここに私のJSONの構造はjavascriptを使用した配列パスからのツリー構造

[ 
    { 
    "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のルートです。ようにChilderen C1

と - 例えば第一の目的は、 -A、-B、-C を意味します。私は、この構造だけを必要とするツリービューライブラリを使用しています。

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

     ] 
     } 
    ] 
    } 
] 

などです。自分のパス構造をツリーに変換したい。助けが必要私はこれをプレーンなjavasriptで達成することができます。

おかげ

答えて

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),[]); 
1

名前付きオブジェクトへの参照を維持するためのヘルパーオブジェクトとちょうど別のアプローチ。

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

関連する問題