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

Question

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

预期输出:

我附上精确的输出作为屏幕截图:

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

Red color:[object Object]

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

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>

请根据需要更新代码。