JSONオブジェクトを使用してHTMLでツリーマップを作成する

Question

children itemとgrand-child itemの番号が変更されるJSONオブジェクトを使用してTreemapを作成したいとします。
私のJSONが

{ 
    "Root": "Parent", 
    "Children": { 
     "Children1": { 
      "ChildName": "Child - 1", 
      "Children": { 
       "GrandChildren1": { 
        "ChildName": "Grand Child - 1", 
        "Children":null 
       }, 
       "GrandChildren2": { 
        "ChildName": "Grand Child - 2", 
        "Children":null 
       } 
      } 
     }, 
     "Children2": { 
      "ChildName": "Child - 2", 
      "Children": { 
       "GrandChildren1": { 
        "ChildName": "Grand Child - 1", 
        "Children": null 
       }, 
       "GrandChildren2": { 
        "ChildName": "Grand Child - 2", 
        "Children": null 
       }, 
       "GrandChildre3": { 
        "ChildName": "Grand Child - 3", 
        "Children": null 
       } 
      } 
     } 
    } 
} 

のように見て、私はこのJSONをパースなどのdivに追加されますHTMLコードを作成するJavaScript関数を作成したい

のようにそのツリーマップを検索します。

<div class="tree"> 
    <ul> 
     <li> 
      <a href="#">Parent</a> 
      <ul> 
       <li> 
        <a href="#">Child-1</a> 
        <ul> 
         <li> 
          <a href="#">Grand Child - 1</a> 
         </li> 

         <li> 
          <a href="#">Grand Child -2 </a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Child - 2</a> 
        <ul> 
         <li><a href="#">Grand Child - 1</a></li> 
         <li> 
          <a href="#">Grand Child -2</a> 
         </li> 
         <li><a href="#">Grand Child -3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

ダイナミックjsonオブジェクトで機能するように関数がどのように記述されるか教えてください。
リーフノードをトレースしてリーフ上に出現する再帰関数を書くことができます。

Answer 1

これに対して再帰関数を作成することができます。また、結果構造のためオブジェクト以外の他の型の値を持つ深度のオブジェクトがあるかどうかを確認する必要があります。

var json = {"Root":"Parent","Children":{"Children1":{"ChildName":"Child - 1","Children":{"GrandChildren1":{"ChildName":"Grand Child - 1","Children":null},"GrandChildren2":{"ChildName":"Grand Child - 2","Children":null}}},"Children2":{"ChildName":"Child - 2","Children":{"GrandChildren1":{"ChildName":"Grand Child - 1","Children":null},"GrandChildren2":{"ChildName":"Grand Child - 2","Children":null},"GrandChildre3":{"ChildName":"Grand Child - 3","Children":null}}}}} 
 

 

 
var tree = document.querySelector('.tree'); 
 

 
function toHTML(data, parent) { 
 
    var check = Object.keys(data).some(function(e) { 
 
    return typeof data[e] != 'object' 
 
    }); 
 
    
 
    if (check) { 
 
    var ul = document.createElement('ul'); 
 
    var li = document.createElement('li') 
 

 
    for (var i in data) { 
 
     if (typeof data[i] == 'object' && data[i] !== null) { 
 
     toHTML(data[i], li); 
 
     } else { 
 
     var a = document.createElement('a') 
 
     a.textContent = data[i]; 
 
     li.appendChild(a); 
 
     } 
 
     ul.appendChild(li); 
 
    } 
 

 
    parent.appendChild(ul) 
 
    } else { 
 
    for (var i in data) { 
 
     toHTML(data[i], parent) 
 
    } 
 
    } 
 

 
} 
 

 
toHTML(json, tree);

<div class="tree"></div>