使用 json 对象在 HTML 中创建树图 [英] Create Tree map in HTML using json object

问题描述

我想使用 JSON 对象创建 Treemap，其中 children item 和 grand-child item 的数量会改变.
我的 json 看起来像

<代码>{"根": "父",孩子们": {儿童 1":{"ChildName": "Child - 1",孩子们": {GrandChildren1":{"ChildName": "孙子 - 1",儿童":空},GrandChildren2":{"ChildName": "孙子 - 2",儿童":空}}},儿童 2":{"ChildName": "Child - 2",孩子们": {GrandChildren1":{"ChildName": "孙子 - 1",儿童":空},GrandChildren2":{"ChildName": "孙子 - 2",儿童":空},GrandChildre3":{"ChildName": "孙子 - 3",儿童":空}}}}}

它的树形图看起来像

我想创建一个 javascript 函数来解析这个 JSON 并创建 HTML 代码，这些代码将附加在 div 中.

<ul><li><a href="#">父</a><ul><li><a href="#">Child-1</a><ul><li><a href="#">孙子 - 1</a><li><a href="#">孙子-2 </a><li><a href="#">孩子 - 2</a><ul><li><a href="#">孙子 - 1</a></li><li><a href="#">孙子-2</a><li><a href="#">孙子-3</a></li>

请告诉我如何编写函数以便它可以与动态 json 对象一起使用.
我们可以编写递归函数来跟踪叶子节点，然后出现在叶子上面.

解决方案

您可以为此创建递归函数，您还需要首先检查对象中任何深度上的任何元素是否具有其他类型的值对象，因为结果结构.

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');函数 toHTML(data, parent) {var check = Object.keys(data).some(function(e) {return typeof data[e] != 'object'});如果(检查){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);} 别的 {var a = document.createElement('a')a.textContent = 数据[i];li.appendChild(a);}ul.appendChild(li);}parent.appendChild(ul)} 别的 {for (var i in data) {toHTML(数据[i]，父)}}}toHTML(json, tree);

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

I want to create Treemap using JSON object in which number of children item and and grand-child item will change.
My json look like

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

And its Tree map will look like

I want to create javascript function which will parse this JSON and create HTML code which will append in div like.

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

please tell me how function will be written so that it will work with dynamic json object.
can we write recursive function which trace the leaf node and then come up on above leaf.

解决方案

You can create recursive function for this, you also need to first check if there is any element in object on any depth that has value of some other type other than object because of result structure.

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>

这篇关于使用 json 对象在 HTML 中创建树图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！