原生JS解析本地JSON文件变量时遇到的问题

1. JSON.parse(jsondata)报错的原因 #

response.json()方法已经自动将JSON格式的响应内容解析成了JavaScript对象，此时jsondata本身就是一个可用的对象，完全不需要再调用JSON.parse()。

当你把对象传入JSON.parse()时，它会先将对象转为字符串"[object Object]"，这显然不是合法的JSON格式，所以才会抛出"[object Object]" is not valid JSON的语法错误。直接用jsondata访问属性即可，比如jsondata.CameraSettings.rawOnOff。

2. 访问jsondata返回undefined的原因及解决 #

你的代码混用了await和.then()，如果这段代码没有包裹在async函数里，await会直接失效，导致异步操作还没完成就去访问jsondata，自然拿不到值。

更清晰且不易出错的写法是完全用await替代.then()：

async function loadCameraSettings() {
  const json_url = "./static/" + captureMode + ".json";
  // 等待请求响应
  const response = await fetch(json_url);
  // 等待响应解析为对象
  const jsondata = await response.json();
  // 直接使用解析后的对象
  console.log(jsondata.CameraSettings);
}

同时还要排查两个关键点：

• 确认captureMode变量的值正确，拼接后的json_url路径指向存在的JSON文件
• 如果是本地直接打开HTML文件，fetch本地JSON会触发跨域限制，需要用本地服务器（比如http-server）运行项目

补充：添加错误处理 #

为了避免网络或文件不存在的问题，建议加上错误捕获：

async function loadCameraSettings() {
  const json_url = "./static/" + captureMode + ".json";
  try {
    const response = await fetch(json_url);
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const jsondata = await response.json();
    console.log(jsondata.CameraSettings);
  } catch (err) {
    console.error('加载JSON出错：', err);
  }
}

内容的提问来源于stack exchange，提问作者Too Long Din't Read