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，而不使用模板文字

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，而应使用变量vehicle，该变量应设置为字符串Car或Bicycle，这也是问题顶部的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"];
}

使用动态内容循环获取数组数据（从JSON）

2 个答案: