JSFiddle - React, Tailwind, and code Playground

by robbyn

CSS

div { margin-left: 2em; }

JavaScript

function appendDom(container, jsonData) {
    for (var i = 0; i <jsonData.length; i++) {
        var $divParent  = $("<div></div>");
        $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);
        if (jsonData[i].children) {
            appendDom($divParent, jsonData[i].children);
        }
        container.append($divParent);
    }
}

var json = {
       "widgetData":[
          {
             "label":"node1",
             "color":"red",
             "children":[
                {
                   "label":"vip1",
                   "color":"red",
                   "children":[
                      {
                         "label":"obj1",
                         "color":"gray",
                         "id":"539803eae4b0ffad82491508"
                      },
                      {
                         "label":"obj2",
                         "color":"green",
                         "id":"5395635ee4b071f136e4b691"
                      },
                      {
                         "label":"obj3",
                         "color":"green",
                         "id":"539803e4e4b0ffad82491507"
                      }
                   ],
                   "id":"53956358e4b071f136e4b690"
                },
                {
                   "label":"vip2",
                   "color":"blue",
                   "id":"539803f2e4b0ffad82491509"
                }
             ],
             "id":"5395634ee4b071f136e4b68e"
          },
          {
             "label":"node2",
             "children":[
                {
                   "label":"vip1",
                   "color":"green",
                   "id":"539803eae4b0ffad82491501"
                },
                {
                   "label":"vip2",
                   "color":"green",
                   "id":"5395635ee4b071f136e4b694"
                }
             ],
             "id":"5395637fe4b071f136e4b692"
          },
          {
             "label":"node3",
     ...