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.

Порада:

Не забувайте, що 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);

Порада:

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

Синтаксис

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

Параметри

*text

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

reviver

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

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

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

Return

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

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/vYvbwXg">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми маємо рядок jsonData, який містить інформацію про користувача у форматі JSON. Використовуючи метод JSON.parse(), ми конвертуємо цей рядок в об'єкт JavaScript, зберігаючи його у змінній user. Після цього ми можемо легко отримати доступ до різних властивостей цього об'єкта, наприклад, name чи hobbies.

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

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

У цьому прикладі JSON-рядок jsonDataмістить дві дати. Щоб автоматично конвертувати рядки цих дат у об'єкти Dateпід час використання JSON.parse() ми створюємо функцію dateReviver Ця функція перевіряє, чи є значення рядком, який відповідає формату дати, і якщо так, конвертує його в дату. За допомогою цього методу ми отримаємо два об'єкти Dateдля startDateта endDate

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

JS довідник

JavaScript

Наповнення JS розділу

JS метод JSON.parse()

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

Синтаксис

Параметри

Return

Переглядачі

Приклади