通过JavaScript数据的For/In循环

Question

在被重定向到一个类似的问题之前：我检查了相关的问题。我明白这件事。我似乎无法正确地将其应用于我的特定代码。

我想使用Javascript显示JSON数据。它工作得很好。然后我增加了一个等级，现在我完全失去了。最初，我有我的总体数据（1），我的3个条目（2）和每个条目（3）的3个属性。

我抓住了这样的数据：

var objDisplay = document.getElementById('myDiv'); 

for (key1 in this.jsonObj){ 

    for (var x = 0; x < this.jsonObj[key1].length; x++){ 
     var objEntry = document.createElement('div'); 

     for (key2 in this.jsonObj[key1][x]){ 

      var sPropertyData = this.jsonObj[key1][x][key2]; 
      var objProperty = document.createElement('div'); 
      objProperty.appendChild(document.createTextNode(sPropertyData)); 
      objEntry.appendChild(objProperty); 

     } 

     objDisplay.appendChild(objEntry); 
    } 

} 

现在我想三倍的条目，并将其分割成多个段，所以我有我的整体数据（1），我的3个部分（2）每个部分的3个条目（3）以及每个条目的4个属性（4）。我也想在单独的div中显示每个部分。

我知道答案可能很容易找出我的基础，但我现在无法想象它，而我的尝试导致了......奇怪的结果。帮帮我？

编辑：新的数据对象，其中每个字母是一款

{ 
    "ABC": [ 

     {"A": 
      [ 
       { "1" : "A1-1", "2" : "A1-2", "3" : "A1-3"}, 
       { "1" : "A2-1", "2" : "A2-2", "3" : "A2-3" }, 
       { "1" : "A3-1", "2" : "A3-2", "3" : "A3-3" } 
      ] 
     }, 

     {"B": 
      [ 
       { "1" : "B1-1", "2" : "B1-2", "3" : "B1-3"}, 
       { "1" : "B2-1", "2" : "B2-2", "3" : "B2-3" }, 
       { "1" : "B3-1", "2" : "B3-2", "3" : "B3-3" } 
      ] 
     }, 

     {"C": 
      [ 
       { "1" : "C1-1", "2" : "C1-2", "3" : "C1-3"}, 
       { "1" : "C2-1", "2" : "C2-2", "3" : "C2-3" }, 
       { "1" : "C3-1", "2" : "C3-2", "3" : "C3-3" } 
      ] 
     } 
    ] 
} 

编辑2：预计产量（不介意类的名字，他们是仅供参考）

<div id="myDiv"> 
    <div class="section"> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    </div> 
    <div class="section"> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    </div> 
    <div class="section"> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    <div class="entry"> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
     <div class="property">stringified json data</div> 
    </div> 
    </div> 
</div> 

我需要的文本唯一的数据是最低级别的值，但我需要能够使用更高级别的样式目的（请参阅在初始代码中创建的div）。

Answer 1

不要在for循环中使用循环对象，而是使用array forEach和object.keys。否则，你忘记了遍历最内层的对象。然而，递归函数可以完成这项工作，无论有多深你窝吧，假设你保持对象相同的结构>阵列>对象>字符串

var jsonObj = { 
 
    "ABC": [ 
 

 
    { 
 
     "A": [{ 
 
     "1": "A1-1", 
 
     "2": "A1-2", 
 
     "3": "A1-3" 
 
     }, { 
 
     "1": "A2-1", 
 
     "2": "A2-2", 
 
     "3": "A2-3" 
 
     }, { 
 
     "1": "A3-1", 
 
     "2": "A3-2", 
 
     "3": "A3-3" 
 
     }] 
 
    }, 
 

 
    { 
 
     "B": [{ 
 
     "1": "B1-1", 
 
     "2": "B1-2", 
 
     "3": "B1-3" 
 
     }, { 
 
     "1": "B2-1", 
 
     "2": "B2-2", 
 
     "3": "B2-3" 
 
     }, { 
 
     "1": "B3-1", 
 
     "2": "B3-2", 
 
     "3": "B3-3" 
 
     }] 
 
    }, 
 

 
    { 
 
     "C": [{ 
 
     "1": "C1-1", 
 
     "2": "C1-2", 
 
     "3": "C1-3" 
 
     }, { 
 
     "1": "C2-1", 
 
     "2": "C2-2", 
 
     "3": "C2-3" 
 
     }, { 
 
     "1": "C3-1", 
 
     "2": "C3-2", 
 
     "3": "C3-3" 
 
     }] 
 
    } 
 
    ] 
 
}; 
 
var objDisplay = document.getElementById('myDiv'); 
 

 
function recurse(obj, level) { 
 
    console.log(level); 
 
    var div = document.createElement('div'); 
 
    switch (level) { 
 
    case 1: 
 
     div.className = 'section'; 
 
     break; 
 
    case 2: 
 
     div.className = 'entry'; 
 
     break; 
 
    case 3: 
 
     div.className = 'property'; 
 
     break; 
 
    } 
 
    Object.keys(obj).forEach(function(key) { 
 
    if (typeof obj[key] === 'string') { 
 
     var prop = document.createElement('div'); 
 
     prop.className = 'property'; 
 
     var tempObj = {}; 
 
     tempObj[key] = obj[key] 
 
     prop.appendChild(document.createTextNode(JSON.stringify(tempObj))) 
 
     div.appendChild(prop); 
 
     return; 
 
    } 
 
    obj[key].forEach(function(obj) { 
 
     div.appendChild(recurse(obj,level + 1)); 
 
    }); 
 
    }); 
 
    return div; 
 
} 
 

 
objDisplay.appendChild(recurse(jsonObj,0));

.section { 
 
    border: 1px solid green; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.entry { 
 
    border: 1px solid blue; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.property { 
 
    border: 1px solid yellow; 
 
    margin: 5px; 
 
    padding: 5px; 
 
}

<div id="myDiv"></div>