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;">'),
tr = $('<tr height="30" style="background-color:black"></tr>'),
td = $('<td>Title</td>');
$('#widget').append(table);
tr.append(td);
table.append(tr);
td.append(appendTr(data.widgetData))
}
function appendTr(data) {
var table = $('<table style="border:1px solid white;width:100%">');
$.each(data, function (i, obj) {
var tr = $('<tr height="180" width="180" style="background-color:' + obj.color + ';"></tr>'),
td = $('<td>' + obj.label + '</td>');
tr.append(td);
table.append(tr);
if (obj.children && obj.children.length) {
td.append(appendTr(obj.children));
}
});
return table;
}
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",
...