title: Create Tree map in HTML using json object
body: <p>I want to create Treemap using JSON object in which number of <code>children item</code> and and <code>grand-child item</code> will change.<br>
  My json look like   </p>
  
  <pre><code>{
      "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
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>And its Tree map will look like  </p>
  
  <p><a href="https://i.stack.imgur.com/fKrVS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fKrVS.png" alt="enter image description here"></a>  </p>
  
  <p>I want to create javascript function which will parse this JSON and create  HTML code which will append in div like.  </p>
  
  <pre><code>&lt;div class="tree"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Parent&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Child-1&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Grand Child - 1&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;Grand Child -2 &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Child - 2&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Grand Child - 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Grand Child -2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Grand Child -3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>please tell me how function will be written so that it will work with dynamic json object.<br>
  can we write recursive function which trace the leaf node and then come up on above leaf.   </p>