Create Tree map in HTML using json object

Question

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.

No, Its my Task, where I want to create Organization chart. But problem is that data is continuously chnaging. — Aamir, May 25 '17 at 17:52
I am not getting that, how could I deal with Grand-Children, then append that HTML string in main string. Then again second or nth Children and its grand children. — Aamir, May 25 '17 at 18:11

Nenad Vracar · Answer 1 · 2017-05-25T18:38:07.810

You can create recursive function for this, you also need to first check if there is any element in object on any depth that has value of some other type other than object because of result structure.

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

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

Create Tree map in HTML using json object

1 Answers1

Linked