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

我想使用JSON对象创建树映射，其中

子项

和

子项

的数量将发生变化。
我的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对象一起使用。

---

我们可以写一个递归函数来跟踪叶子节点，然后在上面的叶子上出现

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

var json={“Root”：“Parent”，“Children”：{“Children 1”：{“Children 1”：{“Children 1”：{“Grand Child-1”，“Children”：null}，“孙子2”：{“ChildName”：“Grand Child-2”，“Children2”：{“Children name”：{“Children 1”：{“Children Children name”：“Grand Children 1”，“Children”：null}，“孙子女2”：{“子女姓名”：“孙子女-2”，“子女”：空}，“孙子女3”：{“子女姓名”：“孙子女-3”，“子女”：空}
var-tree=document.querySelector（'.tree'）；
函数toHTML（数据、父级）{
var check=Object.keys（数据）.some（函数（e）{
返回数据类型[e]！=“对象”
});
如果（检查）{
var ul=document.createElement（'ul'）；
var li=document.createElement（'li'）
用于（数据中的var i）{
if（数据类型[i]='object'&&data[i]！==null）{
toHTML（数据[i]，li）；
}否则{
var a=document.createElement（'a'）
a、 text内容=数据[i]；
李.儿童（a）；
}
ul.儿童（li）；
}
父、子（ul）
}否则{
用于（数据中的var i）{
toHTML（数据[i]，父级）
}
}
}
toHTML（json，树）；

---

这是家庭作业吗？如果不是，你尝试过什么？不，这是我的任务，我想在那里创建组织结构图。但问题是数据在不断变化。所以你尝试过什么？我不明白，我如何处理Grand Children，然后将HTML字符串附加到主字符串中。然后再次添加第二个或第N个Children及其Grand chi艾德伦。