How to display inner child Boolean values a checkbox based on JSON structure?

Question

I am implementing table based on JSON Data. I am able to get two levels, But I am not able to get most inner child values. http://jsfiddle.net/varunPes/0n9fmawb/43/

 var data = { "managment": { "Notice":{ "Red color" :{"View":true,"edit":true,"delete":true} , "Yellow color":{"View":true,"edit":true,"delete":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 class="prop">'+listUI+'</h2>'); var ports = jsonData[listUI]; zoneHtml+='<ul class="port">'; for(var port in ports) { zoneHtml+=('<li>'+port+':'+ports[port] +'</li>'); } zoneHtml+='</ul>'; zoneHtml+='</div>'; } zoneHtml+=('</div>'); } $("#zone").html(zoneHtml);

 .jsonData{ margin-left:10%; } .port{ margin-left:10%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="zone"></div>

Expacted Output:

I am attaching exacted output as a screen shot:

When I am trying to put inner object "red color" three fields "delete", "enable", "view", Then it is showing object like below:

Red color:[object Object]

First I want to get inner object value after that I will put checkbox. Thanks in advance. Your answer is valuable guys:

Answer 1

You should check if property is an object, then you need to loop through each property again. You can play with your logic and make as a recursion function. I have updated your logic:

 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>'+i+':' + ports[port][i] + '</li>'; } zoneHtml += '</ul></li>'; } else { zoneHtml+=('<li>'+port+':'+ports[port] +'</li>'); } } zoneHtml+='</ul>'; zoneHtml+='</div>'; } zoneHtml+=('</div>'); } $("#zone").html(zoneHtml);

 $("#zone").html(zoneHtml); .jsonData{ margin-left:10%; } .port{ margin-left:10%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="zone"></div>

Please update the code as you needed.