JS метод JSON.stringify()

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

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

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

Основне застосування:

1. Веб-API: При взаємодії з веб-API, вам часто потрібно буде відправляти дані у форматі JSON. JSON.stringify() дозволяє перетворити об'єкти JavaScript в рядок, який потім можна відправити на сервер.
2. Локальне зберігання: Якщо ви використовуєте localStorage в браузері для зберігання даних, вам потрібно зберігати ці дані у форматі рядка. За допомогою JSON.stringify() ви можете легко перетворити ваши об'єкти або масиви на рядки для зберігання.

Особливості роботи: Коли ви використовуєте JSON.stringify(), важливо розуміти деякі його особливості:

1. Функції та undefined: JSON.stringify() автоматично пропускає значення undefined і функції. Наприклад:

let data = {
  name: "John",
  age: 30,
  greet: function() { console.log("Hello!"); }
};
console.log(JSON.stringify(data)); // {"name":"John","age":30}

1. toJSON: Якщо об'єкт має метод toJSON, JSON.stringify() викликає його, а не конвертує сам об'єкт. Наприклад:

let user = {
  name: "John",
  age: 30,
  toJSON() {
    return {name: this.name};
  }
};
console.log(JSON.stringify(user)); // {"name":"John"}

1. Простори: Ви можете використовувати третій аргумент для вказівки просторів для форматування виведеного рядка. Це корисно для людського читання:

let user = {name: "John", age: 30};
console.log(JSON.stringify(user, null, 2)); 
/* 
{
  "name": "John",
  "age": 30
}
*/

На відміну від методів, які просто перетворюють об'єкти в рядки (наприклад, метод toString()), JSON.stringify() забезпечує стандартне представлення даних у форматі, яке може бути зрозумілим і іншими системами і мовами програмування.

При використанні JSON.stringify() важливо також розуміти його обмеження. Він не відтворює прототипи, функції, undefined або Symbol. Якщо ви потребуєте серіалізації більш складних структур, розгляньте використання спеціалізованих бібліотек для цього завдання.

правити

Порада

JSON.stringify() кине помилку, якщо в об'єкті буде циклічне посилання. Для вирішення цієї проблеми можна використовувати бібліотеки сторонніх розробників або самостійно усунути циклічні посилання перед конвертацією.

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

Порада

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

let obj = {name: "Олена", age: 25};
console.log(JSON.stringify(obj, null, 4));

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

Порада

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

let obj = {name: "Микола", age: 30, job: "інженер"};
console.log(JSON.stringify(obj, ['name', 'job']));  // {"name":"Микола","job":"інженер"}

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

Порада

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

let date = new Date();
date.toJSON = function() {
    return 'Сьогоднішня дата!';
};
console.log(JSON.stringify(date));  // "Сьогоднішня дата!"

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

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

Синтаксис

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

Параметри

value

Значення, яке потрібно конвертувати у рядок JSON. Це може бути будь-який об'єкт або примітив.

автор: Bond

правити

replacer

Функція, яка змінює процес конвертації в рядок, або масив рядків та чисел, що вказують властивості значення, які мають бути включені у вивід.

Якщо replacer є масивом, всі елементи у цьому масиві, які не є рядками або числами (або примітивами, або об'єктами-обгортками), включаючи значення Symbol, повністю ігноруються. Якщо replacer є будь-чим іншим, ніж функція або масив (наприклад, null або не наданий), всі властивості об'єкта з рядковими ключами включаються в результуючий рядок JSON.

автор: Bond

правити

space

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

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

// Створення об'єкта замовлення
let order = {
    productId: 12345,
    quantity: 3,
};

// Відправлення об'єкта замовлення на сервер у форматі JSON
fetch('/api/placeOrder', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(order),
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log('Сервер недоступний:', error.message));

console.log('Надіслано JSON:', JSON.stringify(order));

// Створення об'єкта користувача
let user = {
    name: "Олександр",
    age: 25,
    isSubscribed: true
};

// Зберігання об'єкта користувача в localStorage у форматі JSON
localStorage.setItem('userInfo', JSON.stringify(user));

// Отримання об'єкта користувача з localStorage та конвертація назад у об'єкт
let retrievedUser = JSON.parse(localStorage.getItem('userInfo'));
console.log(retrievedUser); // { name: "Олександр", age: 25, isSubscribed: true }