<HTML>
<body>
<div id="container"></div>
</body>
<script>
let data = {
"Fish": {
"trout": {},
"salmon": {}
},
"Tree": {
"Huge": {
"sequoia": {},
"oak": {}
},
"Flowering": {
"apple tree": {},
"magnolia": {}
}
}
};
function createTree(container, obj){
container.innerHTML = createTreeText(obj);
//run createTreeText putting data in it
//and fill it into div, the container
}
function createTreeText(obj){
let li = ''; // create a li, the smallest data it should contain
let ul;
for (let key in obj){
li += '<li>' + key + createTreeText(obj[key]) + '</li>';
}
//if the key is not the smallest fragment of that obj,
//it gets recursive and find the smallest and expand the number of li
//the code is expanding the li by writing it inside the variable
//as if the vaule is html lines
if (li){
ul = '<ul>' + li + '</ul>'
}
//when each level of recursion is done it is wrapped by ul
return ul || '';
}
createTree(container, data);
//container is an empy div in html.
</script>
</HTML>
/*
damn this is cool
im afraid i wont be able to write those kind of cool lines of code even later
¯\_(ツ)_/¯
*/
<body>
<div id="container"></div>
</body>
<script>
let data = {
"Fish": {
"trout": {},
"salmon": {}
},
"Tree": {
"Huge": {
"sequoia": {},
"oak": {}
},
"Flowering": {
"apple tree": {},
"magnolia": {}
}
}
};
function createTree(container, obj){
container.innerHTML = createTreeText(obj);
//run createTreeText putting data in it
//and fill it into div, the container
}
function createTreeText(obj){
let li = ''; // create a li, the smallest data it should contain
let ul;
for (let key in obj){
li += '<li>' + key + createTreeText(obj[key]) + '</li>';
}
//if the key is not the smallest fragment of that obj,
//it gets recursive and find the smallest and expand the number of li
//the code is expanding the li by writing it inside the variable
//as if the vaule is html lines
if (li){
ul = '<ul>' + li + '</ul>'
}
//when each level of recursion is done it is wrapped by ul
return ul || '';
}
createTree(container, data);
//container is an empy div in html.
</script>
</HTML>
/*
damn this is cool
im afraid i wont be able to write those kind of cool lines of code even later
¯\_(ツ)_/¯
*/
댓글
댓글 쓰기