Ошибка 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": "Охотница на вампиров" }
Полезные материалы
- JSON.parse() – JavaScript | MDN – Расширенная информация о
JSON.parse()
. - Как работать с JSON в JavaScript | DigitalOcean – Понятное руководство по работе с JSON.
- Методы JSON, toJSON | javascript.info – Практические рекомендации по использованию
JSON.parse()
. - Обработка ошибок JSON – YouTube – Видеогид по выявлению и исправлению ошибок JSON.
- JSON — Основной обзор формата JSON.
- JSON.parse() | W3Schools — Детальный разбор
JSON.parse()
.