JS读取JSON文件报错：JSON.parse提示第1行第1列存在意外字符

算力阿峰

2026-10-24

报错的核心根源

你现在碰到的SyntaxError和你的JSON文件本身没有任何关系，完全是代码编写存在的两个问题：

对JSON.parse的使用有根本性偏差：JSON.parse()的入参必须是合法格式的JSON字符串，你直接传入字符串"file.json"——JS根本不会帮你读取本地磁盘上的这个文件，只会把这串字符当成要解析的JSON内容。这串内容第一个字符是f，根本不是合法JSON的起始字符，自然就抛出“JSON数据第1行第1列存在意外字符”的报错。
变量名前后不匹配：你打算把解析结果存在mydata变量里，后续打印却用了从来没定义过的myJSON，就算前面解析不报错，这里也会触发未定义变量的引用错误。

三个疑问的明确解答

1. JS中正确读取该JSON文件数据的方法

根据实际运行环境分两种场景处理：

纯本地静态文件直接通过file://协议在浏览器打开的场景：
动态请求本地文件会被浏览器同源策略拦截，没有简单的跨域绕过方式，最稳妥的方案是把JSON文件改写成JS变量形式：比如把file.json重命名为file.js，内容调整为const myGridData = [[1,1,0,1,1,0,0,0,1,1,1,1,1,1], ...]，再在HTML里用<script src="./file.js"></script>引入，直接通过变量就能拿到数据，不需要手动调用JSON.parse。

通过本地静态服务（如Vite预览、npx serve等）以http/https协议打开页面的场景：
直接用原生fetch API完成文件读取和解析，示例代码：

fetch('./file.json')
  .then(response => {
    if (!response.ok) throw new Error('JSON文件读取失败')
    // 调用.json()方法等价于读取文本后自动执行合法的JSON.parse
    return response.json()
  })
  .then(data => {
    // 这里拿到的data就是你定义的二维数组结构
    console.log(data)
  })
  .catch(error => console.error('加载出错', error))

注意绝对不要把文件路径字符串直接传给JSON.parse，必须等网络请求拿到文件的实际文本内容之后再做解析。

2. 当前的数组格式JSON是否符合编写规范

完全符合规范。
按照RFC 8259的JSON官方标准，JSON文本的顶级结构可以是任意合法JSON值，既可以是对象，也可以是数组、字符串、数字、布尔值、null，完全没有“顶级必须套一层对象”的强制要求。你在浏览器直接打开文件时能看到格式规整的JSON数组预览，就已经证明你写的JSON格式是完全合法的，不存在格式违规的问题。

3. 浏览器打开JSON文件的显示效果

你提到的浏览器直接打开JSON文件时显示格式规整数组的预览效果，是浏览器内置JSON预览器的正常行为：当浏览器识别到文件的MIME类型为application/json时，就会自动对原始JSON内容做语法高亮、层级折叠的优化展示。如果你的JSON文件真的存在格式错误，浏览器根本不会正常加载并展示规整的预览效果，这一点也能反向证明你的JSON文件本身没有问题。

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