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" }
            ]
        }
    ]
}

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

不要使用in循环来循环对象，而是使用带有object.keys的数组forEach。否则，您忘记迭代最内层对象。但是，假设你保持 Object＆gt;的相同结构，递归函数可以使这个工作无论你嵌套它有多深。数组＆gt;对象＆gt;串

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

For / In循环通过JavaScript数据

1 个答案: