JS метод JSON.stringify()

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

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

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

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

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

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

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

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

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

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

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

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 більш читабельним, використовуйте третій параметр у `JSON.stringify()` - відступи. Це може бути або кількість пробілів, або рядок, який буде використовуватися як відступ. `let obj = {name: "Олена", age: 25}; console.log(JSON.stringify(obj, null, 4));`
Порада:	Ви можете використовувати другий параметр `JSON.stringify()` для вказівки, які ключі потрібно включити в результуючий JSON. Це може бути масивом ключів або функцією, яка дозволяє вам маніпулювати значеннями. `let obj = {name: "Микола", age: 30, job: "інженер"}; console.log(JSON.stringify(obj, ['name', 'job'])); // {"name":"Микола","job":"інженер"}`
Порада:	`JSON.stringify()` кине помилку, якщо в об'єкті буде циклічне посилання. Для вирішення цієї проблеми можна використовувати бібліотеки сторонніх розробників або самостійно усунути циклічні посилання перед конвертацією.
Порада:	Якщо у вас є об'єкт, який потребує специфічної серіалізації, можна додати метод `toJSON()` до цього об'єкта. `JSON.stringify()` автоматично викличе цей метод під час серіалізації об'єкта. `let date = new Date(); date.toJSON = function() { return 'Сьогоднішня дата!'; }; console.log(JSON.stringify(date)); // "Сьогоднішня дата!"`

Синтаксис

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

Параметри

*value

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

replacer

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

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

space

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

Return

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

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/abPXrJz">
  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>.

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

// Створення об'єкта користувача
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 }

Тут ми маємо об'єкт order, який представляє замовлення користувача. Ми хочемо відправити це замовлення на сервер. Для відправлення даних на сервер у форматі JSON, ми можемо використовувати метод fetch для здійснення HTTP-запиту. Але перед відправленням, нам потрібно перетворити наш об'єкт замовлення на рядок JSON за допомогою методу JSON.stringify(). У заголовках ми вказуємо, що тип вмісту нашого тіла запиту є "application/json". Після успішного отримання відповіді від сервера, ми можемо обробити дані як звичайний об'єкт JavaScript.

// Створення об'єкта замовлення
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));

JS довідник

Events

JavaScript

Statements