使用data.json实现交互式图表时触发JSON解析报错如何解决

你遇到的是标准JSON语法解析错误，报错直接指向问题位置：

"Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got ']'"
核心原因是JSON语法不支持数组、对象的最后一个元素后加尾随逗号。你提供的data.json文件中，最后一条数据的闭合花括号}后面多写了一个多余的逗号，解析器读到这个逗号后，会默认后面还有新的数组成员，结果直接读到了数组闭合标记]，不符合JSON语法规则，因此抛出解析失败的错误。
另外你前两条数据的app字段值开头带有无意义的前导空格，虽然不会触发语法错误，但后续做数据匹配、筛选时很容易出现匹配不到值的逻辑问题，建议一并修复。
你附的HTML代码参考截图如下，经检查没有明显的语法逻辑问题：

• 打开data.json文件，删除最后一个数据对象末尾的多余逗号
• （可选但推荐）删除前两个app字段值开头的多余空格
• 保存文件后，通过本地静态服务访问HTML页面：不要直接双击打开HTML文件，file://协议下会触发跨域限制，导致fetch无法读取本地JSON文件，可以用VS Code的Live Server插件、或者在项目目录执行python -m http.server启动本地静态服务后，通过http://localhost:对应端口访问页面

[
  {
    "date": 1,
    "state": "Ala",
    "app": "ChristianMingle"
  },
  {
    "date": 2,
    "state": "Alask",
    "app": "Match"
  },
  {
    "date": 3,
    "state": "Ariz",
    "app": "Tinder"
  },
  {
    "date": 4,
    "state": "Arkan",
    "app": "Farmers Only"
  },
  {
    "date": 5,
    "state": "Cali",
    "app": "Tinder"
  },
  {
    "date": 6,
    "state": "Co",
    "app": "Tinder"
  },
  {
    "date": 7,
    "state": "Con",
    "app": "Tinder"
  },
  {
    "date": 8,
    "state": "Del",
    "app": "Tinder"
  },
  {
    "date": 9,
    "state": "Fl",
    "app": "Tinder"
  },
  {
    "date": 10,
    "state": "Ga",
    "app": "Tinder"
  },
  {
    "date": 11,
    "state": "Hi",
    "app": "Tinder"
  },
  {
    "date": 12,
    "state": "Ida",
    "app": "Tinder"
  }
]

• JSON语法比JavaScript严格：JavaScript中允许数组、对象最后一个元素后加尾随逗号，但标准JSON完全不支持该写法
• JSON的所有键、字符串值必须用双引号包裹，不能使用单引号，也不能写未加引号的键名
• 布尔值、空值必须全小写：只能写true/false/null，不能写大写开头的True/False/Null
  修复JSON语法问题、通过本地静态服务访问页面后，交互式图表即可正常加载数据。

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