JSFiddle - React, Tailwind, and code Playground
HTML
<div id="widget"></div>
JavaScript
ajaxResponseHandler(ajaxSim());
function ajaxResponseHandler(data) {
var table = $('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">');
$('#widget').append(table);
table.append('<tr height="30" style="background-color:black"><td>Title</td></tr>');
appendTr(table, data.widgetData);
}
function appendTr(table, data) {
$.each(data, function (i, obj) {
table.append('<tr height="180" style="background-color:' + obj.color + ';"><td>' + obj.label + '</td></tr>');
if (obj.children) {
appendTr(table, obj.children);
}
});
}
function ajaxSim() {
return {
"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":...