JS遍历本地JSON匹配国家时IOC字段无法在模态框渲染怎么办

核心问题原因 #

• 前端浏览器环境不支持require()语法。require()是Node.js专属的CommonJS模块加载语法，直接在前端代码中运行会抛出未定义错误，导致后续逻辑全部中断，自然无法给IOC字段赋值。
• 变量逻辑缺陷。你用var在if条件块内声明ioc变量，存在变量提升问题，如果遍历完全部数组都没有匹配到对应国家，ioc会是undefined；同时匹配到目标国家后没有加break跳出循环，后续数组项可能会覆盖已匹配到的ioc值。
• HTML结构嵌套错误。你将模态框的<div>写在了<map>标签内部，<map>标签仅支持嵌套<area>子元素，无效嵌套可能导致浏览器解析DOM结构异常。
• 额外确认：请检查你的olympics.json的list数组中是否存在Country字段值为点击区域title对应值的项（比如示例中的Iceland），如果不存在也会导致匹配失败。

修复步骤 #

1. 替换JSON加载方式：把本地olympics.json重命名为olympics.js，修改内容为：

window.olympicsData = {
  "list": [
    // 原JSON里的数组内容保持不变
  ]
}

然后在HTML的jQuery引入代码之后添加一行引入这个JS文件：

<script src="./olympics.js"></script>

可选加载方案：如果不想修改JSON文件格式，也可以用fetch异步加载，代码参考后续优化逻辑，注意该方案需要在本地服务器环境运行（比如vscode的Live Server插件），直接打开本地HTML文件会触发跨域限制。

2. 优化JS逻辑，改用Array.find匹配目标国家，匹配到再赋值：

$(".ModArea").click(function() {
  var name = $(this).attr('title');
  $("#country_name").text(name);
  // 直接使用提前加载的全局数据
  var targetCountry = window.olympicsData.list.find(item => item.Country === name);
  if (targetCountry) {
    // 保留原来的IOC前缀，替换对应值
    $("#IOC").text(`IOC: ${targetCountry.IOC}`);
  } else {
    $("#IOC").text("IOC: 未查询到对应数据");
  }
});

3. 调整HTML结构，把模态框的整个<div class="modal fade" id="Modal">...</div>代码块从<map>标签里移出来，放到<map>闭合标签之后的位置，避免无效嵌套。

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