javascript - 如何使用 Javascript 排除不存在的 JSON 数据？

Question

我正在使用 Javascript Fetch 加载一些 JSON 数据。我想在 HTML 文档中整齐地显示数据。

我在解析某些内容时遇到了一些麻烦。我尝试解析的大多数数据对象都包含图像，我需要加载这些图像。当对象不包含图像时就会出现问题。目前发生的情况是前 3 个图像正在加载(因为它们存在)，然后第四个对象没有图像，并且循环停止加载其余图像(第 5 个、第 6 个等)。

有人可以看看这个并给我一个正确的方向吗？

fetch(url).then(function(response) {
    return response.json();
    JSON.stringify(data);
  })
  .then(function(data) {
    console.log(data);
    for (var i = 0; i < data.length; i++) {
      var listItem = document.createElement("li");
      var imgGrabber = document.createElement("img");

      listItem.innerHTML = data[i].title;
      imgGrabber.src = data[i].media[0].url;

      ul.appendChild(listItem);
      listItem.appendChild(imgGrabber);
    }


  });

因此，当获取函数遇到不包含图像的第三个对象时，就会出现问题。我需要做什么才能使此循环仅抓取存在的图像并跳过空对象？现在它只加载前 3 个图像，然后停止。

我希望这是有道理的，如果我可以改进这个问题，请告诉我。

Answer 1

添加 if 检查以查看媒体和图像 URL 是否存在。该错误可能是由于尝试访问缺失的 media[0] 上的 url 引起的。

if(data[i] && data[i].media && data[i].media[0] && data[i].media[0].url) {...}

条件从左到右评估，如果data[i]为假(在本例中为undefined)，则不会尝试访问data [i].media，等等。

示例:

fetch(url).then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
    for (var i = 0; i < data.length; i++) {
      var listItem = document.createElement("li");
      var imgGrabber = document.createElement("img");

      listItem.innerHTML = data[i].title;

      if (data[i] && data[i].media && data[i].media[0] && data[i].media[0].url) {
        imgGrabber.src = data[i].media[0].url;
      }

      ul.appendChild(listItem);
      listItem.appendChild(imgGrabber);
    }

  });