JSON: що це за формат та як з ним працювати

«ДжЕйсон» чи «ДжейсОн»? JSON чи JSON5? Відповідаємо на ці та багато інших питань.

Ілюстрація: Оля Їжачок для Skillbox Media

Сходознавець, що цікавиться IT. У минулому редактор розділу "Системний блок" журналу "Fакел", автор журналів Computer Gaming World RE, Upgrade Special, керівник веб-ресурсів компанії 1С-Softclub.

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

До створення формату JSON запити на сервер вимагали постійного оновлення сторінки в браузері. Це уповільнювало роботу сайтів. AJAX-запити , що працюють з JSON-форматом, виконуються у фоновому режимі та не потребують оновлення сторінки. Завдяки цьому швидкість роботи з веб-ресурсами зросла, а JSON став стандартом передачі даних в інтернеті.

Сьогодні ми дізнаємося про JSON:

Як з'явився JSON

Творцем JSON вважається Дуглас Крокфорд, відомий американський програміст та один із розробників JavaScript. Він автор популярного статичного аналізатора коду JSLint та книг JavaScript: The Good Parts та How JavaScript Works.

«Я відкрив JSON. Я не стверджую, що винайшов його, оскільки він уже існував у природі. Я просто знайшов його, дав йому назву та розповів, у чому його користь. Я знаю, що є й інші люди, які відкрили його принаймні за рік до мене. Найперший відомий мені випадок пов'язаний з Netscape — хтось у компанії використав літерали масивів JavaScript для передачі даних ще 1996 року, тобто щонайменше за п'ять років до того, як я натрапив на цю ідею».

Дуглас Крокфорд,
The JSON Saga

На початку 2001 року Дуглас Крокфорд та Чіп Морнінгстар заснували компанію State Software. Працюючи над проектами, вони зіткнулися з проблемою – передача даних між сервером та браузером вимагала постійного оновлення сторінки. Це сповільнювало роботу.

Для вирішення проблеми тоді використовували різні підходи, наприклад, спеціальні плагіни для браузерів на основі Flash або Java-аплетів. Але робота з ними була складною та супроводжувалася частими помилками.

Тоді Крокфорд згадав ідею, яку вперше почув у когось із компанії Netscape, та впровадив об'єкт JavaScript всередину HTML-коду, який передавав повідомлення на сторінку. Перший варіант виглядав так:

html>
head>
script>
document.domain =  "fudco"; parent.session.receive(< to:  "session,"
do: "test," text:  "Hello world" > ) script> head> html>

Цей код повинен був відправити повідомлення від дочірнього вікна до вікна з використанням об'єкта parent. Але він не спрацював, бо слово do було зарезервовано для JavaScript. Щоб обійти цю проблему, Крокфорд використав лапки, уклавши в них усі слова всередині об'єкта:

html>
head>
script>
document.domain =  'fudco'; parent.session.receive(<  "to": "session", "do": "test", "text": "Hello world" > ) script> head> html>

Так з'явився новий формат, який спочатку хотіли назвати JSML (JavaScript Markup Language), але перемогла назва JSON (JavaScript Object Notation).

У 2001 році Крокфорд створив веб-сторінку з описом цього формату, щоб усі розробники могли його використовувати у своїй роботі.

«Розробляючи JSON, я прагнув мінімалізму. Моя ідея полягала в тому, що чим менше запитань нам доведеться узгоджувати, тим вища ймовірність, що нам буде просто взаємодіяти одне з одним. Я хотів, щоб стандарт JSON містився на зворотному боці візитної картки».

Дуглас Крокфорд,
Hackernoon

JSON відрізнявся від своїх конкурентів – XML, CSV та YAML – простотою синтаксису та невеликим розміром файлів, що було зручно при роботі з вебом. Завдяки цьому він швидко набирав популярності.

У 2014 році орган зі стандартизації ECMA прийняв JSON і офіційно специфікував його. Сьогодні цей формат є основним для передачі даних при взаємодії веб-сервера та браузера.

У цьому розділі відповімо і на головне питання розробників – як вимовляти JSON?

«Багато людей говорять „ДжейсОн“, що мене завжди тішить. „Ну, бо це я вигадав“.

Переваги JSON

JSON не єдиний формат передачі даних. Деякі розробники використовують XML або YAML.

Простий синтаксис, що легко читається., який зрозумілий і для комп'ютера, і для людини.

Легкість та компактність. JSON-файли важать менше, ніж файли інших форматів, і завантажуються швидше.

Відсутність залежність від конкретної мови програмування. Для роботи з JSON можна використовувати майже будь-яку популярну мову програмування, наприклад, Python або Java.

Універсальність у типах даних. JSON можна використовувати для зберігання масивів, упорядкованих списків та колекцій пар «ключ – значення».Формат підходить для представлення складних структур даних, включаючи дерева та ієрархічні структури.

Широка підтримка у браузерах. Усі сучасні браузери підтримують роботу з JSON.

Самостійне документування. У JSON можна включити метадані, які описують подані дані, спрощуючи роботу з ними.

Структура та синтаксис JSON

Синтаксис JSON повторює синтаксис звичайного об'єкта JavaScript: дані записуються у вигляді пар «ключ – значення» і поділяються комами. Важливо запам'ятати, що після останньої пари кома не ставиться - це поширена помилка, яку можна довго шукати.

Ключі - рядкові змінні, а значення можуть бути рядками, числами, значеннями булевими, об'єктами, масивами або null. Функції та дати у звичайному JSON не підтримуються.

Ось як виглядає простий JSON-файл:

//ключ // значення <  "name": "John Smith", "age": 37 >

Незважаючи на початкову прив'язку формату до JavaScript, специфікація JSON допускає речі, які неприпустимі JavaScript-код. Наприклад, у JSON символи розділення рядків та абзаців можна вказувати без екранування.

Для роботи з датами в JSON необхідно переводити їх у рядковий формат відповідно до стандарту ISO 8601:

2023-08-24T20:45:03.408Z

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

Об'єкти та масиви JSON

Для зберігання даних у JSON використовуються дві структури. об'єкти та масиви.

Об'єкти - Невпорядкована колекція. Для них не важливо в якому порядку йдуть пари «ключ - значення». Тобто їх можна міняти місцями.Але будьте обережні! Коли розробник переміщає пару "ключ - значення" з будь-якого місця на останню, часто забуває видалити кому, що призводить до помилки.

Об'єкт JSON дуже схожий на об'єкт в JavaScript, але ключ завжди повинен бути в лапках. Наприклад:

< "name": "Іван", "age": 34, "Married": true >

Масиви - Упорядкований список значень. Виглядають вони так:

[ "яблуко", "персик", "банан", "ківі" ]

На відміну від об'єкта порядок елементів у масиві важливий. Тут немає ключів, тому звертатися до значень ми можемо лише з індексу елемента. Важливо пам'ятати, що перший елемент індекс 0.

Об'єкти та масиви можуть бути вкладені один в одного, а кількість рівнів вкладеності не обмежена.

Що таке JSON5

JSON5 - це розширення стандарту JSON, що підвищує читання та зручність написання JSON-даних. Крім цього, він додає нові можливості, наприклад, використання коментарів, яких немає в самому стандарті.

Основні відмінності JSON5, корисні в роботі:

Допустимі коментарі:

Необов'язково використовувати лапки для ключів, але тільки в тому випадку, якщо ключ складається з букв, цифр або знаків підкреслення і не є зарезервованим словом:

< key:  "value", // Ключ без лапок >

Є спеціальний формат для дат та часу:

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

Допускає запис чисел з підкресленнями для покращення читаності:

< largeNumber:  1_000_000 // Число з підкресленнями для покращення читаності >

Підтримує шістнадцяткову та восьмеричну системи числення:

0xCAFE_BABE // Шістнадцяткове число >

Але важливо пам'ятати, що JSON5 підтримується не всіма парсерами, додатками та бібліотеками, що поки що обмежує його використання.

Що таке JSON Schema

Для опису та перевірки даних у форматі JSON є спеціальна мова JSON Schema. Допустимо, у нас є звичайний JSON-файл:

< "name": "John Doe", "age": 30, "address": < "City": "New York", "zip": "10001" > >

Розробник не знає, які з цих полів обов'язкові, до якого типу даних можуть належати значення і так далі. JSON Schema дозволяє додати необхідні метадані, або «правила» для цієї інформації, та описати, які поля мають бути заповнені та що вони можуть містити.

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

Завдяки цьому код стає надійним, передбачуваним та стійким до помилок, дозволяючи явно визначати вимоги до подання даних. Ось як виглядатиме вищезгаданий файл, описаний за допомогою JSON Schema:

< "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": < "name": < "type": "string" >, "age": < "type": "number" >, "address": < "type": "object", "properties": < "City": < "type": "string" >, "zip": < "type": "string" > >, "required": ["City", "zip"] > >, "required": ["name", "age", "address"] >

Розберемо код рядково:

• у першому рядку вказано посилання на версію специфікації JSON Schema;
• дані мають бути об'єктом типу «object»;
• об'єкт повинен містити три обов'язкові поля: "name", "age" і address;
• у кожного поля свій тип даних: "string" для імені, "number" для віку та «object» для адреси;
• поле address має бути об'єктом і містити два обов'язкові підполі: «City» і «zip», які відносяться до рядків.

Як працювати з JSON

Вміння працювати з JSON-файлами – одна з базових навичок для розробників, оскільки саме цей формат є стандартом для обміну даними у веб- та мобільних додатках.

Як правило, робота з JSON зводиться до двох дій: серіалізації та десеріалізації.Поговоримо про них докладніше.

Серіалізація — це перетворення даних із внутрішнього формату, наприклад з JavaScript-об'єкта, у формат JSON, який може бути надісланий на сервер. У більшості мов програмування є вбудовані функції або бібліотеки. Наприклад, у JavaScript перетворення об'єкта person у JSON-файл виглядає так:

const person = <name:  'John Doe', age:  30, address: < city:  'New York', zip:  '10001' > >; const jsonString =  JSON.stringify(person);  // Метод JSON.stringify перетворює об'єкт person на JSON-формат
console.log(jsonString);  // Виводить дані у консоль

Десеріалізація, навпаки, перетворює дані з формату JSON назад у внутрішній формат, з яким програміст може працювати у своєму коді:

const jsonString =  '>'; const person =  JSON. Parse (jsonString);  // Перетворимо JSON на об'єкт person
console. log (person);  // Виводить дані у консоль

Що запам'ятати

Згадаймо все, що ми дізналися про JSON:

• JSON – стандартний текстовий формат для зберігання структурованих даних та обміну ними. Найчастіше використовується у Інтернеті.
• Дані в JSON представлені як пар «ключ — значення».
• Для зберігання даних у JSON використовуються дві структури – об'єкти та масиви. Об'єкти – невпорядкована колекція, масиви – впорядкована.
• JSON5 розширює можливості формату, але поки що не підтримується браузерами.
• JSON Schema використовується для визначення вимог до даних: розробник може вказати обов'язкові поля та їх допустимі формати.
• Для роботи з JSON використовується два основних підходи: серіалізація, що дозволяє перетворити JavaScript-код або код іншої мови програмування в JSON-формат, і десеріалізація, що працює навпаки: з формату JSON перекладаються в звичайний код.

Більше цікавого про код — у нашому телеграм-каналі. Підписуйтесь!

Читайте також:

AJAX (Asynchronous JavaScript and XML) — запити, які виконуються сервером та браузером асинхронно.

Невелика програма, найчастіше написана мовою програмування Java у вигляді байт-коду.

Extensible Markup Language, мова для створення та обробки документів як програмами, так і людиною з акцентом на використання в інтернеті.

Comma-separated values ​​(значення, розділені комами) - текстовий формат, призначений для зберігання табличних даних.

Акронім від назви YAML Ain't Markup Language, YAML - не мова розмітки. YAML - мова серіалізації даних, тобто їх переведення в бітову послідовність.

ISO 8601 – міжнародний стандарт, який описує формати дат та часу та дає рекомендації для його використання у міжнародному контексті.

Пояснення JSON простою мовою

Довгий час XML був переважним форматом даних для обміну між двома точками. Потім, на початку 2000 року, був представлений JSON як альтернативний формат даних обміну інформацією. У цій статті ви дізнаєтесь все про JSON. Ви зрозумієте, що це таке, як ним користуватися, і ми прояснимо кілька помилок.

Що таке JSON

JSON – текстовий формат обміну даними. Це набір пар ключ-значення, де ключ повинен бути рядкового типу, а значення будь-якого з таких типів:

Зверніть увагу на кілька важливих правил:

• У форматі даних JSON ключі повинні бути поміщені в подвійні лапки.
• Ключ і значення повинні бути розділені двокрапкою: .
• Можливо кілька пар "ключ-значення". Дві пари "ключ-значення" повинні бути розділені комою , /
• У даних JSON заборонено використовувати коментарі ( // чи /**/ ). (Але ви можете обійти це, якщо вам цікаво.)

Ось так виглядають прості дані в JSON:

"name":
"Alex C",

"age":
2,

"City":
"Huston"

>

Валідні дані JSON можуть бути у двох різних форматах:

• Набір пар "ключ-значення", укладених у фігурні дужки. Ви бачили це на прикладі вище.
• Колекція впорядкованого списку пар ключ-значення, розділених комою ( , ) та укладені у квадратні дужки [. ]. Дивись у прикладі нижче:

[



"name":
"Alex C",

"age":
2,

"City":
"Huston"

>,



"name":
"John G",

"age":
40,

"City":
"Washington"

>,



"name":
"Bala T",

"age":
22,

"City":
"Bangalore"

>

]

Припустимо у вас досвід роботи з JavaScript. В цьому випадку вам може здатися, що формат JSON та об'єкти JavaScript (і масив об'єктів) дуже схожі. Але це негаразд. Невдовзі ми докладно розглянемо відмінності.

Структура JSON була взята із синтаксису об'єкта JavaScript. Це єдиний зв'язок між форматом даних JSON та об'єктами JavaScript.

JSON - це формат даних, що не залежить від мови програмування. Ми можемо використовувати формат даних JSON у Python, Java, PHP та багатьох інших мовах програмування.

Приклади формату даних JSON

Ви можете зберегти дані JSON у файлі з розширенням .json. Давайте створимо файл employee.json з атрибутами (представленими парами "ключ-значення") співробітника.

"name":
"Aleix Melon",

"id":
"E00245",

"Role":
["Dev",
"DBA"],

"age":
23,

"doj":
"11-12-2019",

"Married":
false,

"address":


"street":
"32, Laham St.",

"City":
"Innsbruck",

"country":
"Austria"

>,

"referred-by":
"E0012"

>

Наведені вище дані JSON показують атрибути працівника. Атрибути:

• name: ім'я співробітника. Значення має тип String. Отже, він ув'язнений у подвійні лапки.
• id: унікальний ідентифікатор співробітника. Це знову тип String.
• role : ролі, які виконує співробітник в організації. Співробітник може виконувати кілька ролей. Таким чином переважним типом даних є Array.
• age: поточний вік співробітника. Це тип Number.
• doj: дата прийому співробітника до компанії. Оскільки це дата, вона повинна бути поміщена в подвійні лапки і оброблятися як String .
• married : чи одружений співробітник? Якщо так, то true чи false . Значить значення типу Boolean.
• address: адреса співробітника. Адреса може складатися з кількох частин, таких як вулиця, країна, поштовий індекс та інші.Отже, ми можемо розглядати значення address як уявлення Object (з парами ключ-значення).
• referred-by : id , який направив цього співробітника до організації. Якщо цей співробітник влаштувався за рекомендацією, атрибут матиме тип String (як id ). В іншому випадку він матиме значення null.

Тепер створимо колекцію співробітників у вигляді даних JSON. Для цього потрібно зберігати записи кількох співробітників у квадратних дужках [. ].

[



"name":
"Aleix Melon",

"id":
"E00245",

"Role":
["Dev",
"DBA"],

"age":
23,

"doj":
"11-12-2019",

"Married":
false,

"address":


"street":
"32, Laham St.",

"City":
"Innsbruck",

"country":
"Austria"

>,

"referred-by":
"E0012"

>,



"name":
"Bob Washington",

"id":
"E01245",

"Role":
["HR"],

"age":
43,

"doj":
"10-06-2010",

"Married":
true,

"address":


"street":
"45, Abraham Lane.",

"City":
"Washington",

"country":
"USA"

>,

"referred-by":
null

>

]

Звернули увагу на значення атрибуту referred-by для другого співробітника Bob Washington? Це null. Значить його не рекомендував жоден із співробітників.

Як використовувати дані JSON як рядкове значення

Ми бачили, як форматувати дані JSON у файлі JSON. В якості альтернативи ми можемо використовувати дані JSON як рядкове значення та присвоїти його змінній. Оскільки JSON – це рядковий формат, його можна обробляти як рядок у більшості мов програмування.

Давайте розглянемо приклад, щоб зрозуміти, як це можна зробити JavaScript. Ви можете укласти всі дані JSON у вигляді рядка в одинарні лапки '. '.

Якщо ви хочете зберегти форматування JSON без змін, ви можете створити дані JSON за допомогою літералів шаблону.

const user  =
` "name": "Alex C",  
"age": 2,  
"City": "Huston"  
>`;

Це також зручно, коли ви хочете створювати дані JSON із динамічними значеннями.

const age  =
2;



const user  =
` "name": "Alex C",  
"age":
$age>, 
"City": "Huston"  
>`;



console.log(user);



// Output



"name":
"Alex C",

"age":
2,

"City":
"Huston"

>

Об'єкти JavaScrip і JSON це не одне і те ж

Формат даних JSON є похідним від об'єктної структури JavaScript. Але на цьому подібність закінчується.

Об'єкти в JavaScript:

• Можуть мати методи, що JSON не може.
• Ключі можуть бути без лапок.
• Є коментарі.
• Є сутністю JavaScript.

Як конвертувати JSON в Об'єкт JavaScript, та назад

У JavaScript є два вбудовані методи для перетворення даних JSON на об'єкт JavaScript і навпаки.

Як конвертувати дані JSON на Об'єкт JavaScript

Для перетворення даних JSON на об'єкт JavaScript використовуйте метод JSON.parse() . Він перетворює валідний рядок JSON на Об'єкт JavaScript.

const userJSONData  =
` "name": "Alex C",  
"age": 2,  
"City": "Huston"  
>`;



const userObj  =
JSON.parse(userJSONData);

console.log(userObj);

Як конвертувати JavaScript в дані JSON

Для перетворення об'єкта JavaScript на дані JSON, використовуйте метод JSON.stringify() .

const userObj  =


name:
'Alex C',

age:
2,

city:
'Huston'

>



const userJSONData  =
JSON.stringify(userObj);

console.log(userJSONData);

Ви звернули увагу на термін JSON, який ми використовували для виклику методів parse() та stringify()? Це вбудований об'єкт JavaScript з ім'ям JSON (також можна було б назвати JSONUtil), але він не має відношення до формату даних JSON, який ми обговорювали досі. Так що, будь ласка, не заплутайтеся.

Як обробляти помилки JSON такі, як "Unexpected token in JSON at position"?

При обробці JSON цілком нормально отримати таку помилку під час перетворення даних JSON на об'єкт JavaScript:

Щоразу коли ви стикаєтеся з цією помилкою, перевірте валідність ваших даних JSON/ Ймовірно, ви припустилися тривіальної помилки і в цьому її причина. Ви можете перевірити формат даних JSON за допомогою JSON літера.

Вступ до JSON

JSON (JavaScript Object Notation) – простий формат обміну даними, зручний для читання та написання як людиною, так і комп'ютером.Він заснований на підмножині мови програмування JavaScript, визначеної у стандарті ECMA-262 3rd Edition - December 1999. JSON - текстовий формат, повністю незалежний від мови реалізації, але він використовує угоди, знайомі програмістам C-подібних мов, таких як C, C++, C# , Java, JavaScript, Perl, Python та багато інших. Ці властивості роблять JSON ідеальною мовою обміну даними.

JSON заснований на двох структурах даних:

• Колекція пар ключ/значення. У різних мовах ця концепція реалізована як об'єкт, запис, структура, словник, хеш, іменований список або асоціативний масив
• Упорядкований перелік значень. У більшості мов це реалізовано як масив, вектор, список або послідовність.

Це – універсальні структури даних. Майже всі сучасні мови програмування підтримують їх у будь-якій формі. Логічно припустити, що формат даних, незалежний від мови програмування, має грунтуватися на цих структурах.

У нотації JSON це виглядає так:

Об'єкт - невпорядкований набір пар ключ/значення. Об'єкт починається з фігурної дужки, що відкриває і закінчується >фігурною дужкою, що закриває. Кожне ім'я супроводжується :двокрапкою, пари ключ/значення поділяються ,комою.

Масив - Упорядкована колекція значень. Масив починається з [квадратної дужки, що відкриває і закінчується ]квадратною дужкою, що закриває. Значення розділені ,комою.