通過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>