Робота з форматом JSON у JavaScript

JSON (JavaScript Object Notation) – це текстовий формат, котрий використовується для подання структурованих даних. JSON походить від JavaScript, але є незалежним від мови, тобто його можна використовувати з більшістю мов програмування.

Структура JSON

Об’єкт JSON – це набір пар ключ-значення, де ключами є рядки, а значеннями можуть бути string, number, object, array, boolean або null. Приклад:

{
  "name": "Roy Savage",
  "age": 25,
  "isStudent": false,
  "skills": ["JavaScript", "HTML", "CSS"],
  "address": {
    "city": "Edinburgh",
    "zip": "12345"
  }
}

Деякі переваги JSON

  • має просту структуру, яка нагадує об’єктний синтаксис JavaScript, є легким для читання та писання
  • це легкий і компактний формат, що зменшує витрати на передачу даних
  • JSON можна використовувати з багатьма мовами програмування, що робить його поширеним вибором для обміну даними

Деякі приклади застосування JSON

  • передача даних між клієнтом і сервером у веб-додатках
  • зберігання та управління налаштуваннями конфігурації (наприклад у файлах з розширенням .json)
  • використовується для серіалізації (перетворення об’єктів у текстовий формат) та десеріалізації об’єктів (з текстового формату в об’єкти)
  • зберігання журналів подій або логів, що спрощує їх аналіз

JavaScript – метод JSON.stringify()

Використовується для перетворення JavaScript-об’єктів у JSON-рядки (серіалізація):

const person = {
  name: 'Alice',
  age: 25,
  isStudent: false,
};

const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);

// {"name":"Alice","age":25,"isStudent":false}

Метод JSON.stringify(person) приймає в якості аргументу об’єкт, і перетворює його в рядок. Отриманий рядок називається JSON-форматованим (серіалізованим об’єктом), котрий вже можна відправити по мережі на сервер, або ж зберегти у локальному сховищі.

JavaScript – метод JSON.parse()

Використовується для перетворення рядка JSON в об’єкт JavaScript (десеріалізація):

const jsonPerson = '{"name": "Alice", "age": 25, "isStudent": false}';
const person = JSON.parse(jsonPerson);

console.log(person.name); // Alice
console.log(person.age); // 25
console.log(person.isStudent); // false

Отримання даних у форматі JSON по API

Одним з поширених випадків використання JSON, є отримання даних по API. Для отримання даних у JSON з сервера, можна використовувати метод JavaScript fetch(), після чого викликом response.json(), отримати JavaScript-об’єкт з JSON-рядка тіла відповіді:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
    console.log(data.userId); // 1
    console.log(data.title); // delectus aut autem
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

Відправка даних у форматі JSON по АPI

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

todo = {
  userId: 1,
  title: 'foo',
  completed: false,
};

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  body: JSON.stringify(todo),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    console.error('Error sending data:', error);
  });

// { userId: 1, title: 'foo', completed: false, id: 201 }

Вкладені JSON-об’єкти

При роботі зі складними JSON-даними, може виникнути потреба в доступі до вкладених властивостей. Приклад:

const jsonPerson = '{"user": {"name": "Alice", "address": {"city": "Wonderland", "zip": "12345"}}}';
const person = JSON.parse(jsonPerson);

console.log(person.user.name); // Alice
console.log(person.user.address.city); // Wonderland

Обробка масивів JSON

Дані JSON можуть містити масиви, котрі можна легко аналізувати та маніпулювати ними за допомогою JavaScript:

const jsonPersons = '[{"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}, {"name": "Charlie", "age": 35}]';
const persons = JSON.parse(jsonPersons);

persons.forEach((user) => {
  console.log(`${user.name}: ${user.age}`);
});

// Alice: 25
// Bob: 30
// Charlie: 35

Перевірка структури JSON

Перед синтаксичним аналізом JSON, рекомендується перевіряти валідність його структури даних, для попередження помилок під час виконання:

const value = 'not json';

try {
  const jsObject = JSON.parse(value);
  console.log(jsObject);
} catch (error) {
  console.error('Invalid JSON:', error);
}

// Invalid JSON: SyntaxError: Unexpected token 'o', "not json" is not valid JSON

Фільтрування даних JSON

Під час роботи з великими обсягами даних у JSON, може виникнути потреба їх фільтрації:

const jsonPersons = '[{"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}, {"name": "Charlie", "age": 35}]';
const persons = JSON.parse(jsonPersons);

const personsOver30 = persons.filter((person) => person.age > 30);
console.log(personsOver30);

// [ { name: 'Charlie', age: 35 } ]

Необов’язковий ланцюжок

При доступі до глибоко вкладених властивостей, можна використовувати необов’язковий ланцюжок, для уникнення помилок коли властивості не існує:

const user = { name: 'Alice', address: { city: 'Edinburgh' } };

console.log(user.address?.city); // Edinburgh
console.log(user.contact?.phone); // undefined

Файли .json

Для завантаження json файлу що зберігається локально в системі, можна скористатись вбудованою функцією require (завантажує зовнішні модулі котрі зберігаються в окремих файлах):

Файл config.json

{
  "apiUrl": "https://api.example.com",
  "apiKey": "api-key"
}

const config = require('./config.json');

console.log(config); // { apiUrl: 'https://api.example.com', apiKey: 'api-key' }
console.log(config.apiUrl); // https://api.example.com

Функція require дає змогу використовувати вміст json файлу, як звичайний JavaScript об’єкт, без додаткових перетворень.

Підсумок

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

Мітки: