JS метод JSON.parse()

Загальний опис

JSON.parse(): це вбудований метод в JavaScript, який здійснює конвертацію тексту у форматі JSON в об'єкт JavaScript. Цей метод є частиною глобального об'єкта JSON, і він є критично важливим для роботи з даними у форматі JSON в межах JavaScript.

В сучасному програмуванні, коли мова йде про передачу даних між сервером та клієнтом або між різними сервісами, формат JSON є однією з найбільш популярних та ефективних структур даних. Однак, коли ми отримуємо дані у форматі JSON, вони представляють собою рядок. Щоб використовувати ці дані як об'єкт або масив у JavaScript, нам потрібно перетворити цей рядок. Саме для цього і використовується JSON.parse().

Як і де використовувати: Припустимо, у вас є веб-служба, яка повертає інформацію у форматі JSON:

let jsonData = '{"name": "Олександр", "age": 30}';

Щоб використовувати ці дані як звичайний об'єкт у JavaScript, потрібно використовувати JSON.parse():

let user = JSON.parse(jsonData);
console.log(user.name); // Виведе "Олександр"

Основні особливості та прийоми: JSON.parse() може приймати другий аргумент - так званий reviver, який є функцією, яка буде обробляти кожен ключ/значення пару:

let str = '{"date": "2023-10-10T10:10:10Z"}';
let obj = JSON.parse(str, function(key, value) {
    if (key === 'date') return new Date(value);
    return value;
});
console.log(obj.date); // Виведе об'єкт Date, а не рядок

На відміну від JSON.parse(), є метод JSON.stringify(), який здійснює зворотнє перетворення: він конвертує об'єкт JavaScript у рядок JSON. Ці два методи часто використовуються разом для обробки даних у форматі JSON.

Під час використання JSON.parse() важливо розуміти, що не всі рядки можуть бути коректно розібрані. Наприклад, якщо у вас є рядок, який не відповідає стандартам JSON, JSON.parse() кине виняток. Тому рекомендується завжди використовувати цей метод у блоці try/catch:

try {
    let obj = JSON.parse(invalidData);
} catch (error) {
    console.error("Помилка парсингу JSON:", error);
}

правити

Порада

Перед тим як використовувати JSON.parse(), можна перевірити JSON-рядок на валідність за допомогою інших інструментів або веб-сервісів. Це особливо корисно для початківців, які ще не звикли до синтаксису JSON.

автор: Bond правити

Порада

Якщо ви знаєте структуру даних, які ви очікуєте отримати від JSON.parse(), завжди виконуйте додаткові перевірки, щоб уникнути помилок у випадку відсутності ключових значень або несподіваного формату даних.

автор: Bond правити

Порада

Не забувайте, що JSON.parse() приймає другий параметр – reviver, який дозволяє змінювати значення ключів під час аналізу. Це може бути корисно для професіоналів, які хочуть виконувати складний аналіз або модифікацію даних на льоту.

function dateReviver(key, value) {
   const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z`/;
   if (typeof value === "string" && dateFormat.test(value)) {
       return new Date(value);
   }
   return value;
}
let obj = JSON.parse(yourJSONString, dateReviver);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

JSON.parse(text)
JSON.parse(text, reviver)

Параметри

text

Рядок, який потрібно розібрати як JSON. Дивіться опис синтаксису JSON у відповідному розділі документації чи відділі об'єкта JSON.

автор: Bond

правити

reviver

Якщо це функція, вона визначає, як кожне значення, спочатку отримане після розбору, трансформується перед тим, як бути поверненим. Не-викликні значення ігноруються. Функція викликається з наступними аргументами:

• key: назва ключа у JSON.
• value: значення ключа у JSON.

Функція reviver може бути використана для подальшої обробки кожного ключа і його значення, зміни його, або навіть видалення ключа з кінцевого об'єкта, повертаючи undefined.

автор: Bond

правити

Повернення

value

Повертає об'єкт, масив, рядок, число, булеве значення або null, що відповідає наданому тексту у форматі JSON.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	3	3.5	4	10.5	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	4

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

let jsonData = '{"name": "Олексій", "age": 30, "hobbies": ["читання", "плавання"]}';
let user = JSON.parse(jsonData);

console.log(user.name); // Олексій
console.log(user.hobbies[1]); // плавання

let jsonData = '{"startDate": "2023-10-10T10:00:00.000Z", "endDate": "2023-12-01T12:00:00.000Z"}';

function dateReviver(key, value) {
    const dateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
    if (typeof value === "string" && dateFormat.test(value)) {
        return new Date(value);
    }
    return value;
}

let dates = JSON.parse(jsonData, dateReviver);
console.log(dates.startDate); // Tue Oct 10 2023 10:00:00 GMT+0000 (UTC)
console.log(dates.endDate); // Fri Dec