Игнорирование неопределенных свойств внутри объекта JSON при итерации с использованием цикла forEach

Question

Я использую Vanilla JavaScript для итерации объекта JSON.Некоторые свойства внутри объекта не определены, и они появляются как undefined при заполнении страницы данными.

Это лучший способ перебора большого набора данных с использованием собственного JavaScript и что яделает неправильно, чтобы ключи, которые не определены внутри набора данных, игнорировались?

Кроме того, forEach - лучший способ или для ... 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() {
  if (xhr.status === 200) { // You need this before you parse your JSON
    var cars = JSON.parse(xhr.responseText);
    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>

Единственное изменение в вашем коде - если он существует, добавьте его.Кроме того, ваш чек xhr.status был не в том месте.

Answer 2

Вы можете просто замкнуть каждое свойство в пустую строку.

/* 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>