如何在JavaScript中读取JSON文件转为对象及解决引用返回空数组问题

嘿，我来帮你解决这个问题！你之前的写法有几个关键问题导致拿不到预期数据，我给你拆解清楚，再提供几个靠谱的解决方案：

先说说你原来写法的问题 #

• script标签根本没有type="file"这个合法类型，浏览器完全不知道该怎么处理这个标签，自然不会加载你的JSON内容
• 就算你用了正确的类型（比如type="application/json"），浏览器也不会把JSON内容自动挂载到全局变量data上，所以你直接调用JSON.parse(data)时，data要么是undefined，要么是空值，最终返回空数组也就不奇怪了

方案1：使用Fetch API（推荐，现代浏览器友好） #

这是目前异步加载JSON的标准方法，代码简洁易读，还自带错误处理：

async function loadJSONData() {
  try {
    // 发送请求获取JSON文件
    const response = await fetch('data.json');
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`加载失败！HTTP状态码：${response.status}`);
    }
    // 自动解析JSON为JS对象，不用手动JSON.parse
    const data = await response.json();
    console.log(data);
    // 这里就可以用拿到的数据做后续操作了
  } catch (error) {
    console.error('加载JSON时出错：', error);
  }
}

// 调用加载函数
loadJSONData();

⚠️ 注意：要确保data.json的路径正确，如果JSON文件在子目录里，路径要写成./subfolder/data.json这种相对路径。

方案2：把JSON包装成JS变量（同步加载，适合需要立即用数据的场景） #

如果你不想处理异步逻辑，需要页面加载时就拿到数据，可以试试这个方法：

1. 把data.json重命名为data.js
2. 在data.js里把JSON内容赋值给一个全局变量：

// data.js 里的内容
const myAppData = {
  // 这里直接粘贴你原来的3000行JSON数据
};

3. 在HTML里用普通script标签引入：

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

4. 然后在JS里直接使用myAppData变量：

console.log(myAppData); // 直接拿到解析好的数据，不用再JSON.parse

这个方法的好处是数据同步加载，不需要等待异步请求，适合初始化页面就要用数据的场景。

方案3：使用XMLHttpRequest（兼容老浏览器） #

如果需要兼容IE11这类老浏览器，可以用这个传统方法：

function loadOldSchoolData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json', true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 手动解析JSON
      const data = JSON.parse(xhr.responseText);
      console.log(data);
    } else {
      console.error('加载失败，状态码：', xhr.status);
    }
  };
  xhr.onerror = function() {
    console.error('网络请求出错了');
  };
  xhr.send();
}

loadOldSchoolData();

不过现在这个方法已经逐渐被Fetch API取代了，除非有特殊兼容需求，不然优先选前两个方案。

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