使用json對象在HTML中創建樹圖

我想使用JSON對象創建Treemap，其中children item和grand-child item的數量將發生更改。
的json看起來像使用json對象在HTML中創建樹圖

{ 
    "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 
       } 
      } 
     } 
    } 
}

及其樹形圖的樣子

我想創建javascript函數將解析此JSON和創建HTML代碼將在DIV追加像。

<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對象一起工作。
我們可以寫一個遞歸函數來追蹤葉節點然後在葉上面出現。

來源

2017-05-25 Aamir

這是功課？如果不是，你嘗試過什麼？ – ggdx

不，它是我的任務，我想創建組織結構圖。但問題是數據不斷chnaging。 – Aamir

那麼你有什麼嘗試？ – ggdx

您可以爲此創建遞歸函數，您還需要首先檢查對象中是否有任何深度中的任何元素由於結果結構而具有除對象之外的其他某種其他類型的值。

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>

來源

2017-05-25 18:25:21

使用json對象在HTML中創建樹圖

回答

相關問題