如何在基于 JSON 结构的复选框中显示内部子布尔值？

Question

我正在实现基于 JSON 数据的表。 我能够获得两个级别，但我无法获得大多数内在孩子的价值。 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>

预期输出：

我将精确输出作为屏幕截图附加：

当我尝试将内部对象“红色”三个字段“删除”、“启用”、“查看”时，它显示如下对象：

红色：[object Object]

首先我想获得内部对象值，然后我将放置复选框。 提前致谢。 你的回答是有价值的家伙：

Answer 1

您应该检查属性是否是一个对象，然后您需要再次循环遍历每个属性。 您可以使用您的逻辑并将其作为递归函数。 我已经更新了你的逻辑：

 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>

请根据需要更新代码。