javascript - 使用循环中的动态内容获取数组数据(来自 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>

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

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

Here's the updated fiddle

Updated fiddle不使用模板文字