jQuery请求JSON数据时出现TypeError无法读取location属性如何修复

根因分析 #

• 该错误产生的核心原因是遍历页面所有h5标签时，部分标签的data-code属性值不存在于接口返回的JSON数据中，或是data-code属性为空、值无效，导致data[code]返回undefined，此时尝试读取undefined的location属性就会抛出类型错误。
• 功能看起来正常是因为仅data-code匹配的标签会赋值成功，不匹配的标签仅触发报错但不影响已完成的赋值操作，所以直观上看不出异常。

修复步骤 #

1. 修正请求URL末尾多余的斜杠，避免不必要的服务端重定向
2. 访问属性前增加存在性校验，仅确认对应数据存在时再执行赋值操作

修复后代码 #

$.ajax({
  type: "GET",
  url: "https://covid.ourworldindata.org/data/owid-covid-data.json",
  success: function (data) {
    $("h5").each(function () {
      var code = $(this).data("code");
      // 校验code有效值、对应数据是否存在
      if (code && data.hasOwnProperty(code) && data[code].location) {
        $(this).html(data[code].location);
      }
    });
  },
});

如果你的项目兼容ES2020+语法，也可以用可选链简化判断：

if (code && data[code]?.location) {
  $(this).html(data[code].location);
}

内容的提问来源于stack exchange，提问作者Farrel