Question

我想使用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并创建将在div中附加的HTML代码。

<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

您可以为此创建递归函数，您还需要首先检查在任何深度上的对象中是否存在由于结果结构而具有除object之外的其他类型的值的任何元素。

＆＃13;

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

＆＃13;

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

＆＃13;

使用json对象在HTML中创建树映射

1 个答案: