Ошибка JSON.parse: 'Unexpected token o'. Пояснение и решение

Быстрый ответ

Ошибка SyntaxError при использовании функции JSON.parse() чаще всего вызвана некорректным синтаксисом JSON. Вот способы избежать её:

• Обрамляйте строковые значения в двойные кавычки ".
• Не ставьте запятую после последнего элемента в объекте или массиве.
• Ключи в объекте также следует окружать двойными кавычками ".

Вот пример корректного JSON:

let json = '{"valid": true}'; // Правильный формат JSON
try {
  let obj = JSON.parse(json); // Попытка разбора строки JSON
  console.log(obj); // В случае отсутствия ошибок выводим объект
} catch (e) {
  console.error("Ошибка в JSON:", e); // Ошибка в строке JSON
}

Такой формат JSON поможет предотвратить ошибки при его разборе.

Понимаем ошибки при работе с JSON.parse

Проверяем тип данных перед разбором

Нерушимое правило №1: JSON.parse может обработать только строки. Не стоит передавать в него объекты или массивы JavaScript — они уже и так в правильном формате.

let products = [{ name: "Деревянный кол", price: 19.99, quantity: 1 }]; // Не нужно распарсивать
console.log(products[0].price); // Вывод: 19.99 (Хотя цена за кол действительно высока!)

Правило №2: Если вы не уверены, является ли перед вами строка или объект products, просто спросите у него:

console.log(typeof products); // "Прошу прощения, ты строка или объект?"

Подробнее об этом расскажет наш спикер на видео

Избегаем некорректного преобразования в JSON

Золотое правило для JSON: никогда не используйте .toString() для конвертации объекта в строку для JSON.parse. Результатом будет [object Object], что в мире JSON равносильно бесполезному объекту.

let obj = { a: 1 };
let str = JSON.stringify(obj); // Корректное преобразование в строку
console.log(str); // Вывод: '{"a":1}'

Будьте внимательны с использованием специальных символов

Специальные символы в строках — это подобие подводных мин. Убедитесь, что они правильно экранированы перед их использованием в JSON.

let problematicJson = '{"text": "He said, \"Hello\"."}';
let correctedJson = problematicJson.replace(/\\/g, "\\\\");
let obj = JSON.parse(correctedJson);
console.log(obj.text); // Успех! Кавычки добавлены правильно

Проверяем числовые данные

Проверьте, чтобы числовые данные были действительно числами, а не строками. В конце концов, ожидая получить товар с доставкой, вы не хотите получить его иллюстрацию.

let productsStr = '[{ "name": "Чеснок", "price": "1.25", "quantity": "20" }]';
let products = JSON.parse(productsStr).map(p => ({
  ...p,
  price: parseFloat(p.price),
  quantity: parseInt(p.quantity, 10)
}));

console.log(products[0].price); // Вывод: 1.25, цена на чеснок по международным стандартам

Эффективная отладка с помощью JSON.parse

Полезный совет для отладки: когда возникает ошибка при работе с JSON, выводите тип и значение объекта, который вы пытаетесь разобрать. Это первое, что стоит проверить.

try {
  JSON.parse(products); // Если 'products' не является строкой, это похоже на подножку на скользком полу!
} catch (e) {
  console.error("Тип:", typeof products);
  console.error("Значение:", products); // Эти выводы помогут найти проблему
  throw e;
}

Визуализация

Корректный синтаксис JSON — это залог отсутствия ошибок при его разборе. 🧛‍♂️

{ "name": "Баффи", "age": 30, "occupation": "Охотница на вампиров" }

А вот неожиданный токен — это пример некорректного синтаксиса, который приведет к хаосу. 🍷

{ "name": Баффи, "age": 30, "occupation": "Охотница на вампиров" }

Полезные материалы

1. JSON.parse() – JavaScript | MDN – Расширенная информация о JSON.parse().
2. Как работать с JSON в JavaScript | DigitalOcean – Понятное руководство по работе с JSON.
3. Методы JSON, toJSON | javascript.info – Практические рекомендации по использованию JSON.parse().
4. Обработка ошибок JSON – YouTube – Видеогид по выявлению и исправлению ошибок JSON.
5. JSON — Основной обзор формата JSON.
6. JSON.parse() | W3Schools — Детальный разбор JSON.parse().