Question

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

我解决了一些内容时遇到了一些麻烦。我试图解析的大多数数据对象都包含图像，我需要加载它们。当对象不包含图像时会出现问题。目前正在发生的是前3个图像正在加载（因为它们存在），然后第4个对象没有图像，循环停止加载图像的其余部分（第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);
    }


  });

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

我希望这有意义，如果我可以改进这个问题，请告诉我。

Answer 1

添加if检查以查看媒体和图片网址是否存在。该错误可能是由于尝试访问丢失的url上的media[0]。

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);
    }

  });

Answer 2

也许我错了，但我想只有例外 - 无法获得财产＆＃39; url＆＃39;未定义的。那么也许只是添加条件？

if(data[i].media) { // or data[i].media[0] - depends on JSON structure
   imgGrabber.src = data[i].media[0].url;
   listItem.appendChild(imgGrabber);
}

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

2 个答案: