JSON.parse() в JavaScript — рядок JSON в об'єкт

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

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	8

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

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

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

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

Приклади

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

<header>
  <h2 class="title">JSON.parse()</h2>
  <p class="description">Метод для перетворення рядка у форматі JSON в об'єкт JavaScript.</p>
</header>
<main>
  <div class="result">
    <label>Введіть рядок у форматі JSON:</label>
    <textarea id="jsonInput" rows="5" cols="30">{"name":"Олександр", "age":25}</textarea><br>
    <button onclick="parseJSON()">Парсити JSON</button>
    <div id="output">
      <p>Ім'я: <span id="nameOutput"></span></p>
      <p>Вік: <span id="ageOutput"></span></p>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#jsonInput {
  width: 100%;
  margin-bottom: 10px;
}

#output {
  margin-top: 10px;
}

function parseJSON() {
  let jsonStr = document.getElementById("jsonInput").value;
  try {
    let parsedObj = JSON.parse(jsonStr);
    document.getElementById("nameOutput").innerText = parsedObj.name || "Не вказано";
    document.getElementById("ageOutput").innerText = parsedObj.age || "Не вказано";
  } catch (e) {
    alert("Помилка при парсингу JSON. Перевірте правильність введеного рядка.");
  }
}
//# sourceURL=pen.js

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