57 lines
1 KiB
HTML
Executable file
57 lines
1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
|
|
<script>
|
|
let data = {
|
|
"Fish": {
|
|
"trout": {},
|
|
"salmon": {}
|
|
},
|
|
|
|
"Tree": {
|
|
"Huge": {
|
|
"sequoia": {},
|
|
"oak": {}
|
|
},
|
|
"Flowering": {
|
|
"apple tree": {},
|
|
"magnolia": {}
|
|
}
|
|
}
|
|
};
|
|
|
|
function createTree(container, obj) {
|
|
container.append(createTreeDom(obj));
|
|
}
|
|
|
|
function createTreeDom(obj) {
|
|
// if there's no children, then the call returns undefined
|
|
// and the <ul> won't be created
|
|
if (!Object.keys(obj).length) return;
|
|
|
|
let ul = document.createElement('ul');
|
|
|
|
for (let key in obj) {
|
|
let li = document.createElement('li');
|
|
li.innerHTML = key;
|
|
|
|
let childrenUl = createTreeDom(obj[key]);
|
|
if (childrenUl) {
|
|
li.append(childrenUl);
|
|
}
|
|
|
|
ul.append(li);
|
|
}
|
|
|
|
return ul;
|
|
}
|
|
|
|
let container = document.getElementById('container');
|
|
createTree(container, data);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|