javascript - 使用 forEach 循环迭代时忽略 JSON 对象内的未定义属性

Question

我正在使用 Vanilla JavaScript 循环访问 JSON 对象。对象内的某些属性未定义，当用数据填充页面时，这些属性显示为 undefined。

这是使用原生 JavaScript 遍历大型数据集的最佳方式吗？我做错了什么，以至于忽略了数据集中未定义的键？

此外，forEach 是最好的方法还是 for ... in？

下面是我的代码的精简版:

/* Sample data:

[{
  "bhp": 354,
  "model": "a45",
  "make": "mercedes"
}, {
  "model": "m4",
  "make": "bmw"
}]

*/ 

xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.myjson.com/bins/1cjhoe');
xhr.onload = function() {
  var cars = JSON.parse(xhr.responseText);
  if (xhr.status === 200) {
    populate(cars);
  } else {
    console.log('Request failed. Returned status of ' + xhr.status);
  }
};

xhr.send();

function populate(cars) {
  var list = document.getElementById('list');

  cars.forEach(function(car) {
    var carDiv = document.createElement('div');
    carDiv.className = 'car';

    carDiv.innerHTML = '<div>' + car.make + ' </div>';
    carDiv.innerHTML += '<div>' + car.model + ' </div>';
    carDiv.innerHTML += '<div>' + car.bhp + ' </div>';

    list.appendChild(carDiv);
  });
}

.car {
  margin-bottom: 30px;
}

.car div {
  display: inline-block;
  margin-right: 20px;
  font-size: 20px;
}

<div id="list">

</div>

Answer 1

您可以将每个属性短路为一个空字符串。

/* Sample data:

[{
  "bhp": 354,
  "model": "a45",
  "make": "mercedes"
}, {
  "model": "m4",
  "make": "bmw"
}]

*/ 

xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.myjson.com/bins/1cjhoe');
xhr.onload = function() {
  var cars = JSON.parse(xhr.responseText);
  if (xhr.status === 200) {
    populate(cars);
  } else {
    console.log('Request failed. Returned status of ' + xhr.status);
  }
};

xhr.send();

function populate(cars) {
  var list = document.getElementById('list');

  cars.forEach(function(car) {
    var carDiv = document.createElement('div');
    carDiv.className = 'car';

    if (car.make) { carDiv.innerHTML = '<div>' + car.make + ' </div>'; }
    if (car.model) { carDiv.innerHTML += '<div>' + car.model + ' </div>'};
    if (car.bhp) { carDiv.innerHTML += '<div>' + car.bhp + ' </div>'; }

    list.appendChild(carDiv);
  });
}

.car {
  margin-bottom: 30px;
}

.car div {
  display: inline-block;
  margin-right: 20px;
  font-size: 20px;
}

<div id="list">

</div>