Тема 15

JSON

Що таке JSON

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

Як виглядає JSON?

JSON виглядає як список пар "ключ-значення". Уяви собі, що це як словник, де є слово (ключ) і пояснення цього слова (значення). Наприклад:

json

{
    "name": "John",
    "age": 12,
    "student": true,
    "address": {
        "city": "Kyiv",
        "country": "Ukraine"
    },
    "hobbies": ["reading", "swimming", "drawing"]
}

Пояснення:

Ключ – це як ім'я речі. Наприклад, "name" або "age".
Значення – це те, що стоїть після ключа і пояснює, що це таке. Наприклад, для "name" значення – "John".

У JSON можуть бути різні типи даних:

Рядки (текст): "John"
Числа: 12
Булеві значення (так або ні): true (що означає "так")
Об'єкти (інший набір пар): наприклад, address, де всередині є місто (city) та країна (country)
Масиви (список): ["reading", "swimming", "drawing"]

Де використовується JSON?

Сайти можуть передавати тобі дані у форматі JSON, наприклад, коли ти шукаєш щось в інтернеті, і сайт надсилає тобі результати.
Ігри можуть зберігати твої налаштування або досягнення в JSON.
Програми використовують JSON для збереження важливої інформації або налаштувань.

Синтаксис

Синтаксис JSON досить простий і зрозумілий. Він використовує об'єкти та масиви для структуризації даних. Ось детальне пояснення синтаксису JSON з прикладами:

1) Об'єкти (Objects): Об'єкти JSON представляють асоціативні масиви, де кожен елемент має ключ та значення.

json

{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
}

Приклад:

json

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

2) Масиви (Arrays): Масиви JSON представляють послідовність значень без ключів.

["value1", "value2", "value3"];

Приклад:

["apple", "banana", "orange"];

3) Числа (Numbers): Числа в JSON можуть бути десятковими, з плаваючою крапкою або в науковому записі.

42;
3.14 - 0.5e6;

4) Рядки (Strings): Рядки повинні бути подвійними лапками.

"Hello, world!";

5) Булеві значення (Booleans): JSON підтримує булеві значення true і false.

true;
false;

6) Null: Спеціальне значення null вказує на відсутність значення.

null;

7) Об'єднання об'єктів та масивів: Ви можете вкладати об'єкти та масиви один в одного, створюючи складні структури даних.

json

{
    "person": {
        "name": "Bob",
        "age": 30
    },
    "fruits": ["apple", "banana", "orange"]
}

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

JSON та JS

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

1) Серіалізація (Об'єкт -> JSON): Для перетворення об'єкта на JSON-рядок використовуйте JSON.stringify():

const person = {
	name: "Alice",
	age: 25,
	isStudent: false
};
const jsonString = JSON.stringify(person);
console.log(jsonString);

2) Десеріалізація (JSON -> Об'єкт): Для перетворення JSON-рядка на об'єкт використовуйте JSON.parse():

const jsonString = '{"name": "Alice", "age": 25, "isStudent": false}';
const person = JSON.parse(jsonString);
console.log(person); // Виводить об'єкт

Якщо ви маєте класи та об'єкти з класами, вам також потрібно буде визначити методи серіалізації та десеріалізації.

3) Серіалізація класу (Об'єкт класу -> JSON): Визначте метод toJSON() у вашому класі для визначення того, як ваш клас повинен бути серіалізований.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toJSON() {
    return {
      name: this.name,
      age: this.age
    };
  }
}
const person = new Person("Alice", 25);
const jsonString = JSON.stringify(person);
console.log(jsonString);

4) Десеріалізація класу (JSON -> Об'єкт класу): Визначте статичний метод fromJSON() в вашому класі для створення об'єкта з JSON-рядка.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toJSON() {
    return {
      name: this.name,
      age: this.age
    };
  }
  static fromJSON(json) {
    const data = JSON.parse(json);
    return new Person(data.name, data.age);
  }
}
const jsonString = '{"name": "Alice", "age": 25}';
const person = Person.fromJSON(jsonString);
console.log(person);

З допомогою цих методів серіалізації та десеріалізації ви зможете легко перетворювати об'єкти та класи у JSON-рядки та назад.

Приклади сторінок які використовують JSON

Тут ми розглянемо як працюють дві сторінки, які взаємодіють одна з одною за допомогою JSON даних.

Перша сторінка ("JSON Creator") дозволяє користувачеві ввести своє ім'я та прізвище. Потім користувач може створити JSON об'єкт, який містить ці дані. Ось як це працює:
В цьому прикладі HTML-сторінки, користувач вводить ім'я та прізвище в відповідні поля вводу і натискає кнопку "Create JSON".
Функція run() запускається при натисканні кнопки. Вона отримує значення полів вводу для імені та прізвища.
Створюється об'єкт data, який містить ім'я та прізвище користувача.
Об'єкт data перетворюється в рядок JSON за допомогою JSON.stringify(). Цей рядок JSON відображається на сторінці для користувача.

Друга сторінка ("Page Data Viewer") дозволяє користувачеві вставити JSON дані, створені на першій сторінці. Потім ці дані обробляються і виводяться на сторінці.
Користувач вставляє JSON-рядок в текстове поле на другій сторінці.
Функція run() запускається при натисканні кнопки "View Data". Вона спробує розпарсити введений JSON-рядок за допомогою JSON.parse().
Якщо розпарсити вдається, дані з JSON-рядка використовуються для створення нового вмісту сторінки. На сторінці виводиться заголовок сторінки з ім'ям та прізвищем користувача, а також рядки з іменем та прізвищем.
Якщо розпарсити не вдається (наприклад, користувач ввів некоректні дані), виводиться повідомлення про некоректний JSON.
Обидві сторінки використовують JSON.stringify() для створення JSON-рядків та JSON.parse() для обробки JSON-рядків. Це дозволяє передавати дані між різними сторінками та обробляти їх в зручному форматі.

JSON Creator.html & Page Data Viewer.html

s7-1.htmlhtml

//JSON Creator.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Визначення мета-інформації документа -->
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- Стилі для вигляду сторінки -->
		<style>
			body {
			    font-family: Arial, sans-serif;
			    text-align: center;
			    margin: 0;
			    padding: 20px;
			    background-color: #222;
			    color: #fff;
			}

			label {
			    display: block;
			    margin-bottom: 10px;
			}

			input {
			    padding: 5px;
			    width: 100%;
			    margin-bottom: 15px;
			    background-color: #333;
			    color: #fff;
			    border: none;
			}

			button {
			    padding: 10px 20px;
			    background-color: #007bff;
			    color: #fff;
			    border: none;
			    cursor: pointer;
			}

			button:hover {
			    background-color: #0056b3;
			}

			#output {
			    margin-top: 20px;
			    font-weight: bold;
			}
		</style>
		<title>JSON Creator</title>
	</head>

	<body>
		<h1>Enter Your Name and Surname</h1>
		<form id="jsonForm">
			<label for="name">Name:</label>
			<input type="text" id="name" required />
			<label for="surname">Surname:</label>
			<input type="text" id="surname" required />
			<button type="button" id="createJson" onclick="run()">Create JSON</button>
		</form>
		<div id="output"></div>

		<script>
			function run() {
				const name = document.getElementById("name").value;
				const surname = document.getElementById("surname").value;

				const data = {
					name: name,
					surname: surname,
				};

				const jsonString = JSON.stringify(data, null, 2);

				document.getElementById("output").textContent = jsonString;
			}
		</script>
	</body>
</html>

Цей код визначає сторінку "JSON Creator", яка дозволяє користувачеві ввести своє ім'я та прізвище, а потім створити JSON об'єкт і вивести його на сторінку.

HTML частина визначає вигляд сторінки, включаючи поля для вводу імені та прізвища, кнопку "Create JSON" і область для виведення JSON-рядка.
Функція run() викликається при натисканні кнопки. Вона отримує значення полів вводу для імені та прізвища.
Об'єкт data створюється з введеними даними.
JSON.stringify() перетворює об'єкт data в рядок JSON зі збереженням форматування (за допомогою null, 2 в другому аргументі).
Вміст JSON-рядка виводиться на сторінці в елемент з ідентифікатором "output".

s7-2.htmlhtml

//Page Data Viewer.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Визначення мета-інформації документа -->
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- Стилі для вигляду сторінки -->
		<style>
            /* ... CSS стилі ... */
			body {
			    font-family: Arial, sans-serif;
			    text-align: center;
			    margin: 0;
			    padding: 20px;
			    background-color: #222;
			    color: #fff;
			}

			h1 {
			    margin-bottom: 20px;
			}

			#viewData {
			    padding: 10px 20px;
			    background-color: #007bff;
			    color: #fff;
			    border: none;
			    cursor: pointer;
			}

			#output {
			    border: 2px solid #007bff;
			    padding: 20px;
			    background-color: #333;
			    color: #fff;
			    margin-top: 20px;
			}
		</style>
		<title>Page Data Viewer</title>
	</head>

	<body>
		<h1>Page Data Viewer</h1>
		<textarea id="inputArea" placeholder="Enter JSON data here"></textarea>
		<button id="viewData" onclick="run()">View Data</button>
		<div id="output"></div>

		<script>
			// Отримання посилань на елементи сторінки
			const viewDataButton = document.getElementById("viewData");
			const inputArea = document.getElementById("inputArea");
			const outputDiv = document.getElementById("output");

			// Функція, яка обробляє та виводить дані з JSON-рядка
			function run() {
				const jsonData = inputArea.value;
				try {
					// Розпарсити JSON-рядок
					const data = JSON.parse(jsonData);

					// Очистити попередній вміст
					outputDiv.innerHTML = "";

					// Створити вміст сторінки на основі даних з JSON
					const pageTitle = document.createElement("h2");
					pageTitle.textContent = `Page of ${data.name} ${data.surname}`;
					outputDiv.appendChild(pageTitle);

					const nameLine = document.createElement("p");
					nameLine.textContent = `Name: ${data.name}`;
					outputDiv.appendChild(nameLine);

					const surnameLine = document.createElement("p");
					surnameLine.textContent = `Surname: ${data.surname}`;
					outputDiv.appendChild(surnameLine);
				} catch (error) {
					// Вивести повідомлення про помилку, якщо JSON некоректний
					outputDiv.textContent =
						"Invalid JSON input. Please enter valid JSON data.";
				}
			}
		</script>
	</body>
</html>

Цей код визначає сторінку "Page Data Viewer", де користувач може вставити JSON-рядок, створений на попередній сторінці, та переглянути дані з нього.

HTML частина визначає вигляд сторінки, включаючи текстове поле для вставки JSON, кнопку "View Data" і область для виведення вмісту сторінки.
Функція run() викликається при натисканні кнопки. Вона спробує розпарсити введений JSON-рядок за допомогою JSON.parse().
Якщо розпарсити вдається, дані з JSON-рядка використовуються для створення вмісту сторінки. На сторінці виводяться ім'я, прізвище та заголовок сторінки.
Якщо розпарсити не вдається, виводиться повідомлення про некоректний JSON.
Обидві сторінки взаємодіють через JSON-рядки. Сторінка "JSON Creator" створює JSON-рядок і виводить його на сторінку. Сторінка "Page Data Viewer" приймає JSON-рядок, розпарсює його та виводить дані з нього.

Таблиця.
JSON

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC