使用 json 对象在 HTML 中创建树图答案

【问题标题】：Create Tree map in HTML using json object使用 json 对象在 HTML 中创建树图
【发布时间】：2017-05-26 02:38:07
【问题描述】：

我想使用 JSON 对象创建 Treemap，其中 children item 和 grand-child item 的数量会发生变化。
我的 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
                }
            }
        }
    }
}

它的树图看起来像

我想创建一个 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 对象一起使用。
我们可以编写递归函数来跟踪叶子节点然后出现在上面的叶子上。

【问题讨论】：

这是作业吗？如果没有，您尝试过什么？
不，这是我的任务，我想在其中创建组织结构图。但问题是数据在不断变化。
那你有什么尝试？
我不明白，我该如何处理 Grand-Children，然后将该 HTML 字符串附加到主字符串中。然后是第二个或第 n 个孩子及其孙子。

标签： javascript html json recursion treemap

【解决方案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);

&lt;div class="tree"&gt;&lt;/div&gt;

【讨论】：