For/In 遍历 JavaScript 数据

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) 以及第 3 个每个条目的属性 (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" }
            ]
        }
    ]
}

edit 2: 预期输出（不要介意class名字，仅供参考）

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

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

Answer 1

不要使用 for in 循环遍历对象，而是使用数组 forEach 和 object.keys。否则，您会忘记迭代最内层的对象。但是，无论您嵌套多深，递归函数都可以使它工作，假设您保持相同的结构 Object > Array > Object > String

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>

For/In 遍历 JavaScript 数据

For/In Loop through JavaScript Data

javascript

for-in-loop