嘗試使用 jQuery 獲取 JSON 數據時出現 TypeError

Question

所以我正在嘗試使用此代碼從此鏈接https://covid.ourworldindata.org/data/owid-covid-data.json獲取 JSON 數據

$.ajax({
  type: "GET",
  url: "https://covid.ourworldindata.org/data/owid-covid-data.json/",
  success: function (data) {
    $("h5").each(function () {
      var code = $(this).data("code"); // atribut data-code
      $(this).html(data[code]["location"]);
    });
  },
});

它工作正常，標簽也設置為我想要的值，但是當我檢查控制台時出現此錯誤

Uncaught TypeError: Cannot read properties of undefined (reading 'location')

它指向這條線

$(this).html(data[code]["location"]);

如何解決？

Answer 1

code變量中包含的任何內容都不存在於data對象中，這意味着它返回undefined 。 然后您嘗試在不存在的undefined上調用location屬性，因此它返回錯誤。 您可以通過提前返回來防止它：

var code = $(this).data("code");
if (!data[code]) return;
$(this).html(data[code]["location"]);

或者，如果您需要向這些元素添加一些內容，無論它是否存在，您都可以執行以下操作：

var code = $(this).data("code");
if (!data[code]) {
  $(this).html('Value does not exist');
  return;
};
$(this).html(data[code]["location"]);

Answer 2

我的猜測是您有一些<h5>元素沒有code 數據集屬性，因此您實際上是在嘗試使用

data[undefined].location

這永遠不會奏效。

確保您只查看具有適當數據的元素

$.getJSON("https://covid.ourworldindata.org/data/owid-covid-data.json")
  .done(data => {
    $("h5[data-code]").each((_, h5) => {
      $(h5).html(data[h5.dataset.code]?.location)
    })
  })