ノードと親データをJSONベースのツリーを設定するためにどのように値

Question

I次のHTMLを持っている：

<section class="tree"></section> 

比較的単純な...さて、私は次のようなJSONオブジェクトがあります。

var input = { 
    label: 'Earth', 
    type: 'planet', 
    children: [{ 
     label: 'Australia', 
     type: 'country', 
     children: [{ 
      label: 'Sydney', 
      type: 'city', 
      children: [{ 
       label: 'Office One', 
       type: 'office', 
       children: [] 
      }] 
     }] 
    }, { 
     label: 'USA', 
     type: 'country', 
     children: [{ 
      label: 'Phoenix', 
      type: 'city', 
      children: [{ 
       label: 'Office Two', 
       type: 'office', 
       children: [] 
      }] 
     }, { 
      label: 'New York', 
      type: 'city', 
      children: [{ 
       label: 'Office Three', 
       type: 'office', 
       children: [] 
      }] 
     }] 
    }] 
}; 

を私はノード番号（私たちが出会う新しいノードごとに増加する）とその親ノードを持つDIVの単純なリストを作成しようとしています。

これまでのところ、私は、ノードが働いて得ることができました...しかし、親は常に...ノードマイナスの代わりに、それぞれの親のノードの1つの値に戻って参照するように思わ

その結果、私のリストは次のように探しています：これに代えて

<section class="tree"> 
    <div class="node lvl0" node="1" parent="0">Earth</div> 
    <div class="node lvl1" node="2" parent="1">Australia</div> 
    <div class="node lvl2" node="3" parent="2">Sydney</div> 
    <div class="node lvl3" node="4" parent="3">Office One</div> 
    <div class="node lvl1" node="5" parent="4">USA</div> 
    <div class="node lvl2" node="6" parent="5">Phoenix</div> 
    <div class="node lvl3" node="7" parent="6">Office Two</div> 
    <div class="node lvl2" node="8" parent="7">New York</div> 
    <div class="node lvl3" node="9" parent="8">Office Three</div> 
</section> 

：

<section class="tree"> 
    <div class="node lvl0" node="1" parent="0">Earth</div> 
    <div class="node lvl1" node="2" parent="1">Australia</div> 
    <div class="node lvl2" node="3" parent="2">Sydney</div> 
    <div class="node lvl3" node="4" parent="3">Office One</div> 
    <div class="node lvl1" node="5" parent="1">USA</div> 
    <div class="node lvl2" node="6" parent="5">Phoenix</div> 
    <div class="node lvl3" node="7" parent="6">Office Two</div> 
    <div class="node lvl2" node="8" parent="5">New York</div> 
    <div class="node lvl3" node="9" parent="8">Office Three</div> 
</section> 

これは私のコードです：

nodeCnt = 0; 
var dispTree = function(tree,lvl=0,idx=0,prt=0) { 
idx++; 
$(".tree").append("<div class='node lvl"+lvl+"' node='"+(++nodeCnt)+"' parent='"+prt+"'>"+tree.label+"</div>"); 
parent = nodeCnt; 
for (var i = 0; i < tree.children.length; i++){ 


     dispTree(tree.children[i], lvl+1, idx, parent); 
    } 
}; 

dispTree(input) 

誰かがこのコードで何が間違っているのか、それを修正する方法を教えてもらえますか？

私はここJSFiddleでそれを持っている：http://jsfiddle.net/eliseo_d/cn3s7apz/1/

Answer 1

あなたはこのように再帰を使用することができます。

var input = {"label":"Earth","type":"planet","children":[{"label":"Australia","type":"country","children":[{"label":"Sydney","type":"city","children":[{"label":"Office One","type":"office","children":[]}]}]},{"label":"USA","type":"country","children":[{"label":"Phoenix","type":"city","children":[{"label":"Office Two","type":"office","children":[]}]},{"label":"New York","type":"city","children":[{"label":"Office Three","type":"office","children":[]}]}]}]} 
 

 

 
let node = 1; 
 
var result = [] 
 

 
function tree(lvl, parent = 0, node, data) { 
 
    let div = `<div class="node lvl${lvl}" node="${node}" parent="${parent==0 ? 0 : parent - 1}">${data.label}</div>`; 
 
    n = node += 1 
 
    if (data.children.length) { 
 
    data.children.forEach(e => tree(lvl + 1, node, n, e)) 
 
    } 
 

 
    result.push($(div)) 
 
} 
 

 
tree(0, 0, node, input) 
 

 
$('body').append(...result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>