VSCode中JSON文件报Expected a JSON object错误如何解决

1. JSON文件语法错误 #

你当前的data.json内容是JavaScript对象赋值语句，不是标准JSON格式。JSON是纯数据格式，不支持变量声明（const json = ）、变量名、末尾分号等JS语法，这就是VSCode抛出「Expected a JSON object, array, or literal.」的直接原因。
你之前尝试额外套大括号报错，是因为没有先删掉JS语法部分，不符合JSON的键值对规则才触发了后续三个错误。

2. HTML引用JSON的方式错误 #

直接用<script src="data.json"></script>引入JSON文件是无效的：浏览器会把JSON内容当做JS脚本执行，本身也会抛出语法错误。JSON文件需要通过JS的网络请求接口加载，不能作为script标签的源文件直接引入。

修复步骤 #

• 第一步：替换data.json的全部内容为标准JSON格式：

{
    "books": [{
        "title": "Learn to Code",
        "author": "John Smith",
        "isbn": "324-23243"
    }, {
        "title": "The Adventures JSON",
        "author": "Jason Jones",
        "isbn": "3324-2-444"
    }, {
        "title": "New Objects",
        "author": "Jane Doe",
        "isbn": "2343-234-2433"
    }]
}

• 第二步：修改HTML文件，删除<script src="data.json"></script>这行代码。
• 第三步：在app.js中添加代码加载并使用JSON数据，示例如下：

// 加载本地JSON文件
fetch('./data.json')
  .then(response => response.json())
  .then(jsonData => {
    // jsonData即为解析完成的JSON内容，可直接使用
    console.log(jsonData.books)
    // 示例：将书籍列表渲染到页面
    const outputDom = document.querySelector('.output')
    outputDom.innerHTML = jsonData.books.map(book => {
        return `<div>《${book.title}》 作者：${book.author} ISBN：${book.isbn}</div>`
    }).join('')
  })

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