JSFiddle - React, Tailwind, and code Playground

by Varun sharma

HTML

<div id="zone"></div>

JavaScript

var data = {
"managment":
    {
            "Notice":{
            "Red color" :{"delete":true,"enable":true,"view":true} ,
            "Yellow color":{"delete":true,"enable":true,"view":true},
            "Specail color":" checkoxes"
            },
            "Black Notice":{"black":" Checkboxes"}
    },
"Faculty":
    {
        "salary":{"list":" checkboxes"},
       
    },
};

var zoneHtml = '';


      for (var zoneKey in data) {
        zoneHtml += '<div class="zone">';
        zoneHtml += ('<h1>' + zoneKey + '</h1>');
        var jsonData = data[zoneKey];
        for (var listUI in jsonData) {
          zoneHtml += '<div class="jsonData">';
          zoneHtml += ('<h2>' + listUI + '</h2>');
          var ports = jsonData[listUI];
          zoneHtml += '<ul class="port">';
          for (var port in ports) {
            if (typeof ports[port] === 'object') {
              zoneHtml += '<li>' + port + ':';
              zoneHtml += '<ul>'
              for (var i in ports[port]) {
                zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="'+i+'">'  + JSON.parse(ports[port][i]) + '</li>';
                $('#'+i+'').is('checked', JSON.parse(ports[port][i]));
               
              }
              zoneHtml += '</ul></li>';
            } else {
              zoneHtml += ('<li>' + port + ':' + ports[port] + '</li>');
            }

          }
          zoneHtml += '</ul>';
          zoneHtml += '</div>';
        }
        zoneHtml += ('</div>');
      }


      $("#zone").html(zoneHtml);