尝试使用 jQuery 获取 JSON 数据时出现 TypeError

Posted 2023-05-08

【中文标题】尝试使用 jQuery 获取 JSON 数据时出现 TypeError

【英文标题】：TypeError when trying to fetch JSON data using jQuery

【发布时间】：2021-12-13 07:16:34

【问题描述】：

所以我正在尝试使用此代码从此链接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"]);

如何解决？

【问题讨论】：

你知道data变量中有什么数据吗？我很确定这不是你想的那样，这就是为什么你没有得到你想要的回报。请求返回正常，因为成功函数正在运行。您应该 console.log 数据，以便您可以检查该变量中包含的内容。

但答案是，code 变量中包含的任何内容都不存在于 data 变量中，然后您尝试从未定义的值中提取 location。您需要确保 code 中存储的任何内容实际上在 data 中可用，如果不存在，则需要提前返回。

【参考方案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"]);

【参考方案2】：

我的猜测是您有一些 <h5> 元素没有 code dataset 属性，因此您实际上是在尝试使用

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