加载本地JSON文件报unexpected token :及json未定义错误如何解决

云上老周

2026-10-5

问题根因与修复方案

两个报错均来自JSON加载方式错误：

unexpected token : 报错：你直接用require加载JSON文件，浏览器会把JSON当做JS脚本解析，JSON对象的:不符合JS语法规则，因此抛出语法错误
json is undefined 报错：因为前一步JSON加载解析失败，require的回调函数无法拿到正常的返回值，因此json变量为未定义状态

修复方案

你已经在项目中引入了jQuery，直接使用jQuery内置的$.getJSON方法加载JSON即可，不需要额外引入其他加载工具：

1. 替换原有JS代码

// 提前加载JSON数据缓存，避免每次点击区域重复发起请求
let olympicsData = null;
$.getJSON('/static/olympics.json', function (data) {
  olympicsData = data;
}).fail(function () {
  console.error('JSON加载失败，请检查文件路径是否正确');
});

$(".ModArea").click(function () {
  var name = $(this).attr('title');
  $("#country_name").html(name);
  // 数据未加载完成时的兜底提示
  if (!olympicsData) {
    $("#IOC").html('IOC: 数据加载中，请稍后重试');
    return;
  }
  // 匹配对应国家数据
  const target = olympicsData.list.find(item => item.Country === name);
  if (target) {
    // 注意要取匹配对象的IOC属性，直接输出对象会显示[object Object]
    $("#IOC").html('IOC: ' + target.IOC);
  } else {
    $("#IOC").html('IOC: 未查询到对应国家数据');
  }
});