Чому JSON.parse каже "Unexpected token"?

Це діагностика Unexpected token у JSON.parse: що означає помилка, як читати позицію і що робити, коли тіло — HTML. Ширше про кінцеві коми, лапки й Unexpected end — у Типові помилки JSON: кінцева кома, лапки та Unexpected token.

Що означає “Unexpected token” у JSON.parse()?

JSON.parse() вимагає граматики JSON. Незаконний символ на поточній позиції кидає SyntaxError. {“name”:“Alex”,} нечинний: після тієї коми об’єкт не може закінчитися. Текст повідомлення й позиція й досі різняться залежно від середовища.

Яку помилку кидає JSON.parse()?

Нечинний JSON зазвичай кидає SyntaxError. Запишіть error.name, щоб підтвердити тип. Не жорстко кодуйте повний error.message: рушії й версії формулюють його інакше.

try {
  JSON.parse('{"name":"Alex",}');
} catch (error) {
  console.log(error.name);
  // SyntaxError
}

1. Одинарні лапки замість подвійних

{‘name’:‘Alex’} — нечинний JSON. {“name”:“Alex”} — чинний. Рядки JSON і імена членів об’єкта використовують подвійні лапки. Літерал об’єкта JavaScript на кшталт const user = { name: ‘Alex’ } може бути законним JavaScript і все одно не бути текстом JSON.

Нечинний

{'name':'Alex'}

Чинний

{"name":"Alex"}

2. Кінцеві коми

Кома після останньої властивості чи останнього елемента масиву не є чинним стандартним JSON. {“name”:“Alex”,“age”:30,} і [1, 2, 3,] обидва зазнають невдачі. Вважайте це однією причиною Unexpected token; Типові помилки JSON: кінцева кома, лапки та Unexpected token глибше висвітлює кінцеві коми.

Нечинний

{
  "name": "Alex",
  "age": 30,
}

Чинний

{
  "name": "Alex",
  "age": 30
}

[1, 2, 3,]

3. Імена властивостей без лапок

{ name: “Alex” } може бути літералом об’єкта JavaScript. У JSON імена членів — рядки й потребують подвійних лапок: {“name”:“Alex”}.

Нечинний

{
  name: "Alex"
}

Чинний

{
  "name": "Alex"
}

4. Нечинне екранування рядка

У тексті JSON зворотна скісна риска починає екранування. Сирий шлях на кшталт C:\Users\Alex нечинний, бо \U не є законним екрануванням. Подвойте зворотні скісні. Не змішуйте екранування мови-господаря з екрануванням JSON. Типові помилки JSON: кінцева кома, лапки та Unexpected token висвітлює це глибше.

Нечинний

{"file":"C:\Users\Alex"}

Чинний

{"file":"C:\\Users\\Alex"}

5. Зайвий текст перед JSON або після нього

JSON.parse очікує одне значення JSON. Префікс на кшталт Success: перед {“ok”:true} або суфікс done після нього робить увесь рядок нечинним. Незначущі пробіли навколо одного значення JSON дозволені. JSON не забороняє пробіли перед значенням чи після нього.

Success:
{"ok":true}

{"ok":true}
done

6. Розбір HTML замість JSON

Виклик response.json() на HTML-сторінці — типовий випадок Unexpected token. Хибні endpoint, HTML-сторінки 404 чи 500, перенаправлення входу, тіла проксі й запасні сторінки часто починаються з розмітки. «Unexpected token < завжди означає HTML» занадто сильно: < — підказка, не доказ.

fetch('/api/data')
  .then(response => response.json())

Що зазвичай означає “Unexpected token <”?

Значення JSON зазвичай не починаються з <. Якщо тіло починається з або , < може бути першим незаконним символом. Під час локального налагодження перевірте HTTP-статус, Content-Type і сире тіло. Формулювання рушія й досі різняться.

Перевірте відповідь перед розбором

Тіло fetch можна спожити лише раз. Під час локального налагодження спочатку прочитайте text(), перегляньте короткий префікс, потім застосуйте JSON.parse до того самого рядка. Не викликайте response.json(), а потім response.text() на тій самій відповіді. Не записуйте типові чутливі продакшен-навантаження.

const response = await fetch(url);
const text = await response.text();

console.log(response.status);
console.log(response.headers.get("content-type"));
console.log(text.slice(0, 200));

try {
  const data = JSON.parse(text);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON:", error);
}

Що означає “at position 123”?

Деякі рушії повідомляють позицію, рядок або стовпець. Поруч шукайте погані лапки, кому, дужку чи екранування. Той індекс — де розбір помітив проблему; справжня причина може бути раніше. Не гарантовано, що це саме хибний символ.

Unexpected token проти Unexpected end

Unexpected token означає, що аналізатор зустрів символ, якого не очікував. Unexpected end може з’явитися, коли вхід зупиняється до завершення значення, як у {“name”:“Alex” без закривної дужки. Точне формулювання залежить від рушія. Типові помилки JSON: кінцева кома, лапки та Unexpected token ширше висвітлює неповний JSON.

{"name":"Alex"

JSON — це не літерал об’єкта JavaScript

JSON — формат даних. Літерал об’єкта JavaScript — синтаксис JavaScript. Об’єкт JS із ключами без лапок, одинарними лапками й кінцевою комою не є чинним текстом JSON. JSON.parse не може безпечно розібрати літерали об’єктів JavaScript.

const data = {
  name: 'Alex',
  active: true,
};

{
  "name": "Alex",
  "active": true
}

Чи може JSON містити коментарі?

Стандартний JSON не підтримує коментарі. Рядок // всередині об’єкта нечинний. JSON5 і подібні розширення — інші формати. Форматування та порівняння JSON перевіряє стандартний JSON через JSON.parse і не вважає JSON5 JSON.

{
  // user name
  "name": "Alex"
}

Чи чинні в JSON undefined, NaN і Infinity?

Ні. Значення JSON — об’єкт, масив, рядок, число, true, false і null. undefined, NaN і Infinity — ні. Значення верхнього рівня не мусить бути об’єктом чи масивом: true, 123, “hello” і null є чинним JSON.

{"a":undefined}
{"a":NaN}
{"a":Infinity}

true
123
"hello"
null

Як виправити помилку Unexpected token крок за кроком

Працюйте з джерелом, не з рядком помилки:

1. Підтвердіть, що вхід справді JSON, а не HTML, журнали чи JavaScript.
2. Перегляньте перші символи сирого входу.
3. Якщо це з API, перевірте HTTP-статус і Content-Type. Ані 200, ані application/json не гарантують чинний JSON.
4. Перевірте синтаксис у аналізаторі JSON.
5. Використовуйте повідомлену позицію, рядок або стовпець як підказку, не як гарантовану кореневу причину.
6. Перевірте лапки, коми, фігурні й квадратні дужки та екранування поруч із тією зоною.
7. Порівняйте з відформатованою, перевіреною копією.
8. Виправте серіалізатор або endpoint. Не видаляйте повідомлений токен навмання.

Використовуйте JSON.stringify() коли створюєте JSON у JavaScript

Надавайте перевагу JSON.stringify над ручним склеюванням рядків. Він видає чинний текст JSON для значень, які серіалізує. Він не зберігає кожне значення JavaScript: undefined, функції й символи мають особливу поведінку. Та деталь тут поза межами теми.

const data = {
  name: "Alex",
  active: true
};
const json = JSON.stringify(data);
// {"name":"Alex","active":true}

Нечинний JSON проти справжнього виправлення

Ці пари перевірено через JSON.parse. Для HTML виправлення — відповідь, не редагування синтаксису.

Проблема	Нечинний	Виправлення
Одинарні лапки	{'a':1}	{"a":1}
Кінцева кома	{"a":1,}	{"a":1}
Ключ без лапок	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
Тіло HTML	<html>...	Перевірте endpoint і сиру відповідь. Не редагуйте HTML у JSON.

Простий гід рішень для Unexpected token

Якщо JSON.parse зазнав невдачі, вирішіть, чи взагалі маєте JSON, перш ніж переписувати лапки.

• JSON.parse зазнав невдачі
• ↓
• З API? Перевірте статус, Content-Type і сире тіло
• Починається як JSON? Якщо ні, виправте джерело або endpoint
• Якщо так, перевірте лапки, коми, дужки, екранування, непідтримувані значення
• Використовуйте повідомлену позицію як підказку
• ↓
• Виправте джерело, потім розберіть знову

Перевірте JSON перед розбором або використанням

NEXNARA Форматування та порівняння JSON перевіряє JSON у браузері через JSON.parse—не eval.

Перевірка, гарне форматування з 2 пробілами, 4 пробілами чи табуляцією, мініфікація, копіювання, завантаження й вивантаження .json. JSON Diff охоплює вкладені об’єкти й масиви, шляхи, підсумок, фільтри й обмін. Після розбору гарна й мініфікована копії тих самих даних порівнюються як рівні; ключі об’єктів порівнюються за іменем.

Текст більший за 5 MB може здаватися повільним. Текст більший за 15 MB у браузері не обробляється.

Перевірка й форматування JSON відбуваються у вашому браузері. Цей інструмент не надсилає JSON на сервер NEXNARA. Реклама та інші функції сайту все одно використовують мережу.

Вставте рядок, що зазнав невдачі, у Форматування та порівняння JSON і прочитайте перші символи, перш ніж переписувати лапки.

FAQ

Чому JSON.parse каже Unexpected token?

Текст не є чинним JSON у точці, де зупинився аналізатор. Типові причини: лапки, коми, зайвий текст або не-JSON тіло на кшталт HTML.

Що означає Unexpected token < in JSON?

Перший незаконний символ може бути <. Це часто вказує на HTML-сторінку, але не є доказом 404 чи HTML у кожному випадку. Перевірте статус, Content-Type і сире тіло.

Як знайти позицію помилки в JSON?

Якщо рушій повідомляє позицію, рядок або стовпець, дивіться поруч. Справжня помилка може бути раніше. Використовуйте як підказку, потім перевіряйте.

Чи може JSON використовувати одинарні лапки?

Ні. Стандартні рядки JSON і імена членів використовують подвійні лапки.

Чи може JSON мати кінцеві коми?

Ні. Стандартний JSON не дозволяє кому після останньої властивості чи елемента масиву.

Як перевірити, чи рядок є чинним JSON?

Викличте JSON.parse у try/catch або вставте текст у Форматування та порівняння JSON. Якщо розбір кидає SyntaxError, рядок не є чинним JSON.