JSON.parse: примеры (JAVASCRIPT)

Метод JSON.parse в JavaScript: полный обзор функции
Раздел: JSON, Парсинг
JSON.parse(text: String, [reviver]: Function): Object
типовые примерыJSON.parse на php, python, mysqlJSON.parse изменения javascriptпримеры расширенные

Функция JSON.parse: основы

Метод JSON.parse() используется для преобразования строки в формате JSON в объект JavaScript. Функция применяется при получении данных от сервера, чтении из локального хранилища или разборе конфигурационных файлов.

Синтаксис и аргументы

Синтаксис функции: JSON.parse(text[, reviver]).

  • text (обязательный): строка в формате JSON для преобразования. Должна соответствовать стандарту JSON.
  • reviver (опциональный): функция, преобразующая значения перед возвратом. Вызывается для каждой пары ключ-значение, начиная с вложенных свойств.

Возвращаемое значение

Функция возвращает объект JavaScript, массив, строку, число, логическое значение или null в зависимости от содержимого JSON-строки. При несоответствии формату выбрасывается исключение SyntaxError.

Примеры использования JSON.parse

Базовое преобразование

const jsonString = '{"name": "Анна", "age": 28}';
const obj = JSON.parse(jsonString);
console.log(obj.name);
Анна

Использование reviver-функции

const jsonString = '{"date": "2024-01-15"}';
const obj = JSON.parse(jsonString, (key, value) => {
    if (key === 'date') return new Date(value);
    return value;
});
console.log(obj.date instanceof Date);
true

Разбор массива

const jsonArray = '[1, 2, "три", null]';
const arr = JSON.parse(jsonArray);
console.log(arr[2]);
три

Альтернативные функции в JavaScript

В JavaScript существуют другие методы работы с JSON:

  • JSON.stringify(): преобразует объект JavaScript в JSON-строку. Используется для сериализации данных перед отправкой на сервер или сохранением.
  • eval(): выполняет строку как код JavaScript. Может парсить JSON, но не рекомендуется из-за уязвимостей безопасности и меньшей производительности.

Предпочтительнее использовать JSON.parse() для парсинга JSON, так как он безопаснее и оптимизирован для этой задачи.

Аналоги JSON.parse в других языках

Python

import json
json_string = '{"name": "Анна", "age": 28}'
data = json.loads(json_string)
print(data['name'])
Анна

Модуль json предоставляет функции loads() для строк и load() для файлов. Отличие: в Python результат преобразуется в словарь, список или примитивные типы Python.

PHP

$json_string = '{"name": "Анна", "age": 28}';
$data = json_decode($json_string, true);
echo $data['name'];
Анна

Функция json_decode() принимает второй аргумент для возврата ассоциативного массива вместо объекта.

C#

using System.Text.Json;
string jsonString = "{\"name\": \"Анна\", \"age\": 28}";
var data = JsonSerializer.Deserialize>(jsonString);
Console.WriteLine(data["name"]);
Анна

Библиотека System.Text.Json предоставляет методы для десериализации JSON в строго типизированные объекты.

Типичные ошибки при использовании JSON.parse

Неверный формат JSON

try {
    const obj = JSON.parse('{name: "Анна"}');
} catch (e) {
    console.log(e.message);
}
Expected property name or '}' in JSON at position 1

Ключи в JSON должны быть заключены в двойные кавычки.

Одиночные кавычки

try {
    const obj = JSON.parse("{'name': 'Анна'}");
} catch (e) {
    console.log(e.message);
}
Expected property name or '}' in JSON at position 1

Стандарт JSON разрешает только двойные кавычки для строк.

Незакрытые скобки

try {
    const obj = JSON.parse('{"name": "Анна"');
} catch (e) {
    console.log(e.message);
}
Unexpected end of JSON input

Изменения в JSON.parse

Спецификация ECMAScript не вносила значительных изменений в работу JSON.parse() в последних версиях. Основные улучшения касаются производительности и обработки ошибок. В ECMAScript 2019 уточнено поведение при разборе некорректных UTF-8 последовательностей. Современные движки JavaScript оптимизируют функцию для более быстрой обработки больших JSON-строк.

Расширенные примеры JSON.parse

Использование reviver для фильтрации

Пример javascript
const jsonString = '{"a": 1, "b": 2, "c": 3, "d": 4}';
const obj = JSON.parse(jsonString, (key, value) => {
    return typeof value === 'number' ? value * 2 : value;
});
console.log(obj);
{ a: 2, b: 4, c: 6, d: 8 }

Восстановление прототипа объекта

Пример javascript
class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return `Привет, ${this.name}!`;
    }
}
const jsonString = '{"name": "Иван"}';
const obj = JSON.parse(jsonString, (key, value) => {
    if (key === '') return Object.assign(new Person(), value);
    return value;
});
console.log(obj.greet());
Привет, Иван!

Обработка дат в сложных структурах

Пример javascript
const jsonString = `{
    "events": [
        {"title": "Встреча", "date": "2024-03-15T10:00:00"},
        {"title": "Конференция", "date": "2024-03-20T14:30:00"}
    ]
}`;
const data = JSON.parse(jsonString, (key, value) => {
    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
        return new Date(value);
    }
    return value;
});
console.log(data.events[0].date.getFullYear());
2024

Разбор с восстановлением циклических ссылок

Пример javascript
const jsonString = '{"name": "Объект", "self": null}';
const obj = JSON.parse(jsonString);
obj.self = obj;
console.log(obj === obj.self);
true

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

JS JSON.parse function comments

En
JSON.parse Parses a JSON string, constructing the JavaScript value or object described by the string