Javascript 使用循环中的动态内容获取数组数据（来自JSON）

这是我正在尝试构建的示例代码。实际的JSON有更多的数据，使得代码中的“switch”语句部分不太实用，无法维护（目前我唯一能让它工作的方法）

是否有一种方法可以将其替换为类似于我用于其他数据“Model1”和“Model2”的内容，以利用“for”循环中使用的动态数据

我在以下位置创建了一个测试：

var数据={
“汽车”：{
“轮子”：4，
“InStock”：{
“丰田”：{
“模型1”：10，
“模式2”：5
},
“本田”：{
“模型1”：12，
“模式2”：3
}
}
},
“自行车”：{
"轮子":二,，
“InStock”：{
“丰田”：{
“模型1”：25，
“模式2”：14
},
“本田”：{
“模型1”：22，
“模式2”：13
}
}
}
};
var车辆=[{
名称：“汽车”
},
{
名称：“自行车”
}
];
适用于（车辆中的i）{
var车辆=车辆[i]。名称；
document.getElementsByClassName（vehicle+“Model1”）[0]。innerHTML=vehicle+”，丰田，1型：“+data[vehicle]。InStock.Toyota[“Model1”]；
document.getElementsByClassName（vehicle+“Model2”）[0]。innerHTML=vehicle+”，丰田，2型：“+data[vehicle]。InStock.Toyota[“Model2”]；
开关（车辆）{
案例“汽车”：
document.getElementsByClassName（vehicle+“Wheels”）[0]。innerHTML=vehicle+，Toyota，Wheels:“+data.Car[“Wheels”]；
打破
“自行车”一案：
document.getElementsByClassName（vehicle+“Wheels”）[0]。innerHTML=vehicle+，Toyota，Wheels:“+data.Bicycle[“Wheels”]；
打破
}
}

当然！您的switch语句可以如下所示：

switch (vehicle) {
  case "Car":
    document.getElementsByClassName(vehicle + "Wheels")[0].innerHTML = vehicle + ", Toyota, Wheels: " + data.Car["wheels"];
    break;
  case "Bicycle":
    document.getElementsByClassName(vehicle + "Wheels")[0].innerHTML = vehicle + ", Toyota, Wheels: " + data.Bicycle["wheels"];
    break;
}

为此：

document.getElementsByClassName(vehicle + "Wheels")[0].innerHTML =
    vehicle + ", Toyota, Wheels: " + data[vehicle]["wheels"];

这个新表单的关键部分是最后的

数据[车辆][“车轮”]

部分。不要使用已知的对象属性

Car

和

Wheel

，只需使用变量

vehicle

，该变量应设置为字符串

Car

或

Bicycle

，这也是问题顶部json

数据中的属性名称

因此，您的整个
for循环
最终将如下所示：

for (i in vehicles) {
  var vehicle = vehicles[i].name;

  document.getElementsByClassName(vehicle + "Model1")[0].innerHTML = vehicle + ", Toyota, Model 1: " + data[vehicle].InStock.Toyota["Model1"];
  document.getElementsByClassName(vehicle + "Model2")[0].innerHTML = vehicle + ", Toyota, Model 2: " + data[vehicle].InStock.Toyota["Model2"];

  // new line, replacing your switch statement
  document.getElementsByClassName(vehicle + "Wheels")[0].innerHTML =
    vehicle + ", Toyota, Wheels: " + data[vehicle]["wheels"];
}

您可以像这样使用嵌套和循环来获取任意位置的任何动态
数据
：


var data={“Car”：{“wheels”：4，“InStock”：{“Toyota”：{“Model1”：10，“Model2”：5}，“Honda”：{“Model1”：12，“Model2”：3}}}，“Bicycle”：{“wheels”：2，“InStock”：{“Toyota”：{“Model1”：25，“Model2”：14}，“Honda”：{“Model1”：22，“Model2”：13}}；
const$vehicles=document.getElementById（“车辆”）；
Object.entries（data）.forEach（（[key，value]）=>{
Object.entries（value.InStock）.forEach（[vehicleName，models]）=>{
Object.entries（models.forEach）（[modelName，count]，index）=>{
$vehicles.innerHTML+=`${key}，${vehicleName}，型号${index+1}:${count}`
});
$vehicles.innerHTML+=`${key}，${vehicleName}，车轮：${value.Wheels}`；
});
$vehicles.innerHTML+='
'//在车辆类型之间添加一行
});

谢谢，我不想枚举数据流。每个数据段都需要转到HTML模板上存在的某个部分。虽然我会玩你提交的，看看我是否能适应它。我会被诅咒的！在提交问题之前，我确实试过了，但它不起作用。现在再试一次，然后开始工作。实际代码中必须有另一个问题。因为他在处理小提琴样品。谢谢@ShaiHul哈哈当，我很高兴这对你有用：D