如何打印此JavaScript数据结构

Question

我在循环时遇到了麻烦，我只是想在数据结构中打印出详细信息数组。

  for(i in myObj.detail){
  x += "<h2>" + myObj.detail[i].bigtitle + "</h2>";  
  for(z=0; z<3; z++){   
     x+="<h2>"+ myObj.detail[i].infor[i].step[z] + "</h2>"; 
     for(m=0; m<3; m++){
       x+="<h2>"+ myObj.detail[i].infor[i].image[m] + "</h2>"; 
         for(c=0; c<3; c++){
            x+="<h2>"+ myObj.detail[i].infor[i].content[c] + "</h2>"; 
           }
        }
     }
 }  

myObj={"detail":[{
         "bigtitle":"Print Room",
         "lable":3,        
         "infor":[{"step":["First","Second","Third"]},
                  {"image":["imge-1","imge-2","image-3"]},
                  {"content":["1111","2222","3333"]}
                 ]}
               }

结果应该像这样：

Print Room 
  First
  image-1
  1111
  Second
  imge-2
  2222
  Third
  image-3
  3333

Answer 1

您不需要使用所有这些循环，它们似乎没有用，并且会导致许多例外，您只需要2循环：

• 首先使用myObj.detail.length循环myObj.detail循环以循环在所有这些数组元素上。
• ，第二个要在step，image和content条目上循环，使用固定计数器的循环使用循环以获取所有这些3条目。

因此，您的代码看起来像这样：

var x = "";
for (i in myObj.detail) {
  x += "<h2>" + myObj.detail[i].bigtitle + "</h2>";
    for (m = 0; m < 3; m++) {
      x += "<h2>" + myObj.detail[i].infor[0].step[m] + "</h2>";
      x += "<h2>" + myObj.detail[i].infor[1].image[m] + "</h2>";
      x += "<h2>" + myObj.detail[i].infor[2].content[m] + "</h2>";
    }
}

演示：

myObj = {
  detail: [{
    bigtitle: "Print Room",
    lable: 3,
    infor: [{
        step: ["First", "Second", "Third"]
      },
      {
        image: ["imge-1", "imge-2", "image-3"]
      },
      {
        content: ["1111", "2222", "3333"]
      }
    ]
  }]
}
var x = "";
for (i in myObj.detail) {
  x += "<h2>" + myObj.detail[i].bigtitle + "</h2>";
    for (m = 0; m < 3; m++) {
      x += "<h2>" + myObj.detail[i].infor[0].step[m] + "</h2>";
      x += "<h2>" + myObj.detail[i].infor[1].image[m] + "</h2>";
      x += "<h2>" + myObj.detail[i].infor[2].content[m] + "</h2>";
    }
}
document.write(x);

Answer 2

尝试无循环的cos cos这个json易于访问，并且对管理CPU有益:)此处示例：

console.log(myObj.detail[0].bigtitle);
console.log(myObj.detail[0].lable);
console.log(myObj.detail[0].infor[0].step[0]);
console.log(myObj.detail[0].infor[0].step[1]);
console.log(myObj.detail[0].infor[0].step[2]);
console.log(myObj.detail[0].infor[1].image[0]);
console.log(myObj.detail[0].infor[1].image[1]);
console.log(myObj.detail[0].infor[1].image[2]);
console.log(myObj.detail[0].infor[2].content[0]);
console.log(myObj.detail[0].infor[2].content[1]);
console.log(myObj.detail[0].infor[2].content[2]);

https://codepen.io/headmax/pen/rlpljd?editors=1111