如何在基於 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>

請根據需要更新代碼。