使用RequireJS加载JSON获取奥运国家数据时出现script错误如何解决

问题原因 #

• RequireJS原生仅支持加载JavaScript模块，直接加载JSON文件时会将其作为JS脚本解析，JSON语法不符合JS规范，因此触发脚本错误。
• 现有代码中Array.find()返回的是匹配的国家对象，直接插入DOM会显示[object Object]，需要明确读取IOC字段。

最优解决方案（基于已引入的jQuery实现，无需额外依赖） #

直接替换你的JS代码为以下内容即可：

$(".ModArea").click(function () {
    var name = $(this).attr('title');
    $("#country_name").html(name);
    // 用jQuery自带的getJSON加载JSON文件
    $.getJSON('../olympics.json', function (json) {
        // 匹配对应国家，读取IOC字段
        var targetCountry = json.list.find(element => element.Country === name);
        if (targetCountry) {
            $("#IOC").html('IOC: ' + targetCountry.IOC);
        } else {
            $("#IOC").html('IOC: 暂无数据');
        }
    });
});

注意事项 #

• 请确认../olympics.json的路径是否正确，路径是相对于当前运行的HTML文件计算的。
• 本地打开HTML测试时需要用本地服务器启动，直接用文件协议打开会触发跨域限制导致JSON加载失败。

可选方案：坚持用RequireJS加载JSON的实现方法 #

如果必须使用RequireJS加载JSON，按以下步骤操作：

1. 下载RequireJS官方json插件放到你的项目目录
2. 配置RequireJS路径：

require.config({
    paths: {
        json: '替换为你的json插件文件实际路径（不带.js后缀）'
    }
});

3. 修改加载代码，添加json!前缀标记加载类型：

require(['json!../olympics.json'], function (json) {
    // 后续数据处理逻辑和jQuery方案一致
})

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