如何显示基于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>

精确的输出：

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

当我尝试放置内部对象“红色” 时，三个字段分别为“删除”，“启用”，“视图”，然后显示如下对象：

  

红色：[对象对象]

首先，我要获取内部对象的值，然后再放置复选框。提前致谢。您的答案很有价值：

Answer 1

您应该检查property是否是一个对象，然后您需要再次遍历每个属性。您可以发挥自己的逻辑，并使其成为递归函数。 我已经更新了您的逻辑：

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>

请根据需要更新代码。