当前位置：首页 > news >正文

SyntaxError: Invalid or unexpected token in JSON at position x

news 2025/9/17 20:53:44

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 问题描述
- 原因分析
- 解决方案
- - 1. 检查JSON字符串格式
  - 2. 添加异常捕获机制
  - 3. 验证数据源
  - 4. 非空判断
- 实战案例
- 总结

问题描述

在JavaScript开发过程中，开发者经常会遇到 SyntaxError: Invalid or unexpected token in JSON at position x 的错误提示。该错误通常表示在尝试解析JSON字符串时，字符串的格式不符合规范，导致解析失败。

原因分析

JSON字符串格式错误：
- 缺少引号：JSON键和值必须用双引号括起来，否则会导致解析错误。例如：
```
{ name: "John", age: 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 多余的逗号：在对象或数组中，最后一个元素后添加了多余的逗号，导致解析失败。例如：
```
{ "name": "John", "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 引号未正确闭合：JSON字符串中的引号未正确闭合，例如：
```
{ "name": "John, "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 键名未使用双引号括起来：JSON对象中的键名未使用双引号括起来，例如：
```
{ name: "John", age: 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 值未使用双引号括起来：JSON字符串中的值未使用双引号括起来（如果是字符串类型的值），例如：
```
{ "name": John, "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 使用了无效的转义字符：JSON字符串中包含了无效的转义字符，例如：
```
{ "name": "John\", "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John\\", "age": 30 }
```
数据源问题：
- 非JSON格式的数据：服务器返回的数据不是有效的JSON格式，而是HTML或其他文本格式。例如：
```
<html><body><script>console.log('Hello World');</script></body>
</html>
```
- 数据传输错误：JSON数据在传输过程中可能被截断或损坏，导致解析失败。
代码逻辑问题：
- 未对数据源进行非空判断：在使用 JSON.parse() 进行转换时，未对数据源进行非空判断，导致空值或格式改变时解析失败。例如：
```
let jsonString = null;
let data = JSON.parse(jsonString); // 报错: SyntaxError: Unexpected token u in JSON at position 0
```

解决方案

1. 检查JSON字符串格式

使用在线JSON验证工具（如JSONLint）检查JSON字符串的格式是否正确。确保所有键值对都用双引号括起来，没有多余的逗号，并且引号正确闭合。

2. 添加异常捕获机制

在解析JSON时，使用 try-catch 语句捕获并处理异常，以便更好地处理错误。例如：

try {const data = JSON.parse(jsonString);
} catch (error) {console.error('JSON解析错误:', error.message);
}

3. 验证数据源

确保从服务器获取的数据是有效的JSON格式。可以在浏览器控制台中打印出响应数据，检查其格式是否正确。例如：

console.log(response);

4. 非空判断

在使用 JSON.parse() 之前，对数据源进行非空判断，避免因空值或格式改变导致的解析错误。例如：

if (jsonString) {let data = JSON.parse(jsonString);
} else {console.error('数据源为空');
}

实战案例

假设有一个函数用于从服务器获取JSON数据并进行解析：

function fetchData() {fetch('/api/data').then(response => response.text()).then(jsonString => {try {const data = JSON.parse(jsonString);console.log(data);} catch (error) {console.error('JSON解析错误:', error.message);}}).catch(error => {console.error('请求失败:', error);});
}

总结

SyntaxError: Invalid or unexpected token in JSON at position x 错误通常是由于JSON字符串格式错误、数据源问题或代码逻辑问题引起的。通过以下方法可以有效避免该问题：

检查JSON字符串格式：使用在线工具检查JSON字符串的格式是否正确。
添加异常捕获机制：在解析JSON时，使用 try-catch 语句捕获并处理异常。
验证数据源：确保从服务器获取的数据是有效的JSON格式。
非空判断：在使用 JSON.parse() 之前，对数据源进行非空判断。

通过这些方法，开发者可以提高代码的健壮性，减少运行时错误，提升应用的稳定性和用户体验。建议开发者定期检查和测试代码，确保所有JSON解析操作都具备正确的数据源和格式。

SyntaxError: Invalid or unexpected token in JSON at position x

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/3/8 6:03:23

Uncaught TypeError: Cannot read properties of undefined (reading ‘xxx‘)

编程日记 2025/3/8 6:02:22

Nginx 跨域配置详细讲解

一、跨域请求概述跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种机制，它使用额外的HTTP头部来告诉浏览器让运行在一个origin（域）上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资…...

编程日记 2025/3/8 6:01:21

前端开发基石：HTML语义化深度解析与实践指南

一、语义化设计的本质价值 1.1 从文档结构到信息表达在Web诞生初期（1991年），HTML仅包含18个标签用于学术文档展示。经过30年发展，HTML5已拥有超过110个标签，其中语义化标签占比提升至60%。这种演进背后是互联网从简…...

编程日记 2025/3/8 6:00:20

mongodb安装教程以及mongodb的使用

MongoDB是由C语言编写的一种面向文档的NoSQL数据库，旨在为WEB应用提供可扩展的高性能数据存储解决方案。与传统的关系型数据库（如 MySQL 或 PostgreSQL）不同，MongoDB 存储数据的方式是以 BSON（类似于 JSON 的二进制格式…...

编程日记 2025/3/8 5:58:17

C# 中的多线程同步机制：lock、Monitor 和 Mutex 用法详解

在多线程编程中，线程同步是确保多个线程安全地访问共享资源的关键技术。C# 提供了几种常用的同步机制，其中 lock、Monitor 和 Mutex 是最常用的同步工具。本文将全面介绍这三种同步机制的用法、优缺点以及适用场景，帮助开发者在多线程开发中做…...

编程日记 2025/3/8 5:57:16

【通义万相】蓝耘智算 | 开源视频生成新纪元：通义万相2.1模型部署与测评

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈人工智能与大模型应用 ⌋ ⌋ ⌋ 人工智能（AI）通过算法模拟人类智能，利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络（如ChatGPT&…...

编程日记 2025/3/8 5:55:13

期权帮|中证1000股指期权交割结算价怎么算？

期权帮锦鲤三三每日分享期权知识，帮助期权新手及时有效地掌握即市趋势与新资讯！ 中证1000股指期权交割结算价怎么算？ 一、按照最后交易日结算价： （1）计算方法：最后交易日标的指数&#xff08…...

编程日记 2025/3/8 5:53:11

Python 面向对象高级编程-定制类

目录 __str__ __iter__ __getitem__ __getattr__ __call__ 小结看到类似__slots__这种形如__xxx__的变量或者函数名就要注意，这些在Python中是有特殊用途的。 __slots__我们已经知道怎么用了，__len__()方法我们也知道是为了能让class作用于len()…...

编程日记 2025/3/8 5:52:10

qt creator示例空白

通常情况下，进入qt后，就会弹出以下窗口： 但如果出现示例空白，那可能是因为 Qt Creator 无法正确识别 Qt 的安装路径或配置。解决： 点击“添加”： 然后跳转到你的qmake.exe的目录，例如我的qmak…...

编程日记 2025/3/8 5:51:09

MyBatis-Plus 与 Spring Boot 的最佳实践

在现代 Java 开发中，MyBatis-Plus 和 Spring Boot 的结合已经成为了一种非常流行的技术栈。MyBatis-Plus 是 MyBatis 的增强工具，提供了许多便捷的功能，而 Spring Boot 则简化了 Spring 应用的开发流程。本文将探讨如何将 MyBatis-Plus 与 Spring Boot 进行整合，并分享一些…...

编程日记 2025/3/8 5:50:08

TDengine 中的标签索引

简介本节说明 TDengine 的索引机制。在 TDengine 3.0.3.0 版本之前（不含），默认在第一列 TAG 上建立索引，但不支持给其它列动态添加索引。从 3.0.3.0 版本开始，可以动态地为其它 TAG 列添加索引。对于第一个 TAG 列上…...

编程日记 2025/3/8 5:49:06

工业自动化核心：BM100 信号隔离器的强大力量

安科瑞吕梦怡 18706162527 BM100系列信号隔离器可以对电流、电压等电量参数或温度、电阻等非电量参数进行快速精确测量，经隔离转换成标准的模拟信号输出。既可以直接与指针表、数显表相接，也可以与自控仪表（如PLC）、各种 A/D …...

编程日记 2025/3/8 5:48:05

Ascend开发板镜像烧录、联网、其他设备访问

Ascend开发板镜像烧录、联网、外部访问 1.1 Ascend开发板制卡方式一：镜像烧录 SD卡插入读卡器，读卡器插入PC的USB接口烧录镜像前，先格式化一下SD卡参考教程：格式化SD卡、修复烧写系统失败的SD卡 WinR，输入cmd DIS…...

编程日记 2025/3/8 5:47:04

Llama-Factory框架下的Meta-Llama-3-8B-Instruct模型微调

目录引言 Llama - Factory 训练框架简介： Meta - Llama - 3 - 8B - Instruct 模型概述： Lora 方法原理及优势： 原理优势环境准备: 部署环境测试： 数据准备： 模型准备： 模型配置与训练&#xff1…...

编程日记 2025/3/8 5:45:02

MySQL进阶-分析查询语句EXPLAIN

概述能做什么？ 表的读取顺序数据读取操作的操作类型哪些索引可以使用哪些索引被实际使用表之间的引用每张表有多少行被优化器查询官网介绍 https://dev.mysql.com/doc/refman/5.7/en/explain-output.html https://dev.mysql.com/doc/refman/8.0/…...

编程日记 2025/3/8 5:44:00

Python 高级编程与实战：构建数据可视化应用

在前几篇文章中，我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧、数据科学、机器学习、Web 开发、API 设计、网络编程、异步IO、并发编程、设计模式与软件架构、性能优化与调试技巧、分布式系统、微服务架构、自动化测试框架以及 RESTf…...

编程日记 2025/3/8 5:42:59

学习threejs，Animation、Core、CustomBlendingEquation、Renderer常量汇总

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️Animation常量汇总1.1.1 循…...

编程日记 2025/3/8 5:41:58

Java直通车系列14【Spring MVC】（深入学习 Controller 编写）

目录基本概念编写 Controller 的步骤和要点 1. 定义 Controller 类 2. 映射请求 3. 处理请求参数 4. 调用业务逻辑 5. 返回响应场景示例 1. 简单的 Hello World 示例 2. 处理路径变量和请求参数 3. 处理表单提交 4. 处理 JSON 数据 5. 异常处理基本概念 Cont…...

编程日记 2025/3/8 5:40:57

【蓝桥杯集训·每日一题2025】 AcWing 5539. 牛奶交换 python

AcWing 5539. 牛奶交换 Week 3 3月6日题目描述农夫约翰的 N N N 头奶牛排成一圈，使得对于 1 , 2 , … , N − 1 1,2,…,N−1 1,2,…,N−1 中的每个 i i i，奶牛 i i i 右边的奶牛是奶牛 i 1 i1 i1，而奶牛 N N N 右边的奶牛是奶牛 …...

编程日记 2025/3/8 5:39:56

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/9/15 18:35:09

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑一、学生端在主界面可以选择自己的用户角色选择学生则进入学生登录界面…...

编程新知 2025/9/17 9:39:25

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

JVM垃圾回收机制全解析

Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2025/9/11 4:52:26

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/9/16 17:08:01

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/8/17 10:25:39