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

Question

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

有没有办法用类似于我用于其他数据“Model1”和“Model2”的东西来替换它，以利用“for”循环中使用的动态数据？

我在以下位置创建了一个测试： https : //jsfiddle.net/ShaiHul/evrqj1b5/42/

 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 } } } }; var vehicles = [{ name: "Car" }, { name: "Bicycle" } ]; 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"]; 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; } }

 <div class="CarModel1"></div> <div class="CarModel2"></div> <div class="CarWheels"></div> <br/> <div class="BicycleModel1"></div> <div class="BicycleModel2"></div> <div class="BicycleWheels"></div>

Answer 1

您可以使用嵌套的Object.entries()并像这样循环遍历它们以获取任何位置的任何动态data ：

 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("vehicles"); Object.entries(data).forEach(([key, value]) => { Object.entries(value.InStock).forEach(([vehicleName, models]) => { Object.entries(models).forEach(([modelName, count], index) => { $vehicles.innerHTML += `<div>${key}, ${vehicleName}, Model ${index + 1}: ${count}</div>` }); $vehicles.innerHTML += `<div>${key}, ${vehicleName}, Wheels: ${value.wheels}</div>`; }); $vehicles.innerHTML += '<br>' // add a line between vehicle types });

 <div id="vehicles"> </div>

我正在使用模板文字来创建每个div的内容。 如果您的浏览器尚不支持它，您可以在每个字符串上使用+创建它。 像这样：

$vehicles.innerHTML += '<div>' + key + ', ' + vehicleName + ', Model ' + (index + 1) + ':' + count + '</div>';

这是更新的小提琴

在不使用模板文字的情况下更新了小提琴

Answer 2

肯定的事！ 你的 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"];

这个新表单的关键部分是最后的data[vehicle]["wheels"]部分。 而不是使用已知的对象属性Car和Wheel ，只需使用应该设置为字符串Car或Bicycle的变量vehicle ，它们也是问题顶部的json data的属性名称。

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

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