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.