Урок, у якому розглядається, що таке JSON і які має переваги проти іншими форматами даних.

Поняття JSON

JSON (JavaScript Object Notation) – це текстовий формат подання даних у нотації об'єкта JavaScript.

Це означає те, що дані в JSON організовані, як і в об'єкті JavaScript. Але на відміну від останнього формат запису JSON має деякі особливості, які будуть розглянуті трохи згодом.

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

Структура формату JSON

Хто знайомий з процесом створення об'єктів JavaScript, не побачить ні чого нового в структурі формату JSON. Це пов'язано з тим, що структура JSON відповідає структурі JavaScript з деякими обмеженнями.

Більш просто уявити JSON можна як контейнер, що складається з елементів. Кожен елемент у такому контейнері – це деяка структурна одиниця, що складається з ключа та значення.

При цьому значення безпосередньо пов'язане з ключем і утворюють так звану пару ключ-значення. Щоб отримати значення в такому об'єкті, необхідно знати його ключ. Синтаксично такі дані в JSON записуються так:

У наведеному вище записі видно, що ключ відокремлюється від значення за допомогою знака двокрапки (:). При цьому ключ в об'єкті JSON обов'язково має бути укладений у подвійні лапки. Це перша особливість JSON, яка його відрізняє від об'єкта JavaScript. Т.к. в об'єкті JavaScript ключ (властивість об'єкта) не обов'язково має бути укладений у подвійні лапки.

Наприклад, структура об'єкта, яка є валідною з точки зору JavaScript і не валідною з точки зору JSON:

Var person = ( name: "Іван"; ) // об'єкт JavaScript

Попередження: ім'я ключа намагайтеся задавати так, щоб не ускладнити доступ до даних, тобто. при складанні імені переважно дотримуватися верблюжої нотації або використовувати для з'єднання слів знак нижнього підкреслення ("_").

Значення ключа в JSON може бути записано в одному з таких форматів: string (рядком), number (числом), object (об'єктом), array (масивом), boolean (логічним значенням true або false), null (спеціальним значенням JavaScript).

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

Var person = ( "name" : "Іван"; "setName": function() ( console.log(this.name); ) ) // об'єкт JavaScript

Для відокремлення одного елемента (пари ключ-значення) від іншого використовується знак кома (,).

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

Увага: формат подання даних JSON не допускає використання всередині своєї структури коментарів.

Робота з JSON в JavaScript

На відміну від об'єкта JavaScript JSON є рядком.

Наприклад:

// наприклад змінна personData, містить рядок, який являє собою JSON var personData = "("name":"Іван","age":37,"mother":("name":"Ольга","age": 58), "children": ["Маша", "Ігор", "Таня"], "married": true, "dog": null)";

Робота з JSON зазвичай ведеться у двох напрямках:

Парсинг - це переведення рядка, що містить JSON, в об'єкт JavaScript.

Конвертувати об'єкт JavaScript в рядок JSON. Іншими словами, ця дія виконує перетворення зворотного парсингу.

Парсинг JSON

Парсинг JSON, тобто. переклад рядка JSON в об'єкт JavaScript здійснюється за допомогою методу eval() або parse() .

Використання методу eval():

// змінна person - це об'єкт JavaScript, отриманий шляхом виконання коду (рядки) JSON var person= eval("("+personData+")");

Використання методу JSON.parse():

// змінна person - це об'єкт JavaScript, отриманий шляхом парсингу рядка JSON var person = JSON.parse(personData);

Конвертування об'єкта JavaScript у рядок JSON

Переведення об'єкта JavaScript у рядок JSON здійснюється за допомогою методу JSON.stringify() . Даний метод здійснює зворотну дію методу JSON.parse() .

Var personString = JSON.strigify(person);

Переваги формату JSON

Формат представлення даних JSON має такі переваги:

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

Через те, що даний формат має дуже багато переваг, він став застосовуватися не тільки в JavaScript, але і в багатьох інших мовах, таких як C, Ruby, Perl, Python, PHP і т.д.

Порівняння форматів JSON та XML

Формат JSON має такі переваги перед форматом XML:

При передачі деяких даних розмір JSON буде значно меншим, ніж розмір XML.

JSON має більш зручні методи конвертації у структури даних JavaScript, ніж XML.

JSON просто створювати, ніж XML.

Робота з даними JSON після парсингу здійснюється як із об'єктом JavaScript.

//JSON var personData = "("name":"Іван","age":37,"mother":("name":"Ольга","age":58),"children":["Маша" , "Ігор", "Таня"], "married": true, "dog": null)"; //Об'єкт JavaScript person var person = JSON.parse(personData);

Розглянемо основні моменти:

//отримати значення ключа (властивості) name person.name; person["name"]; //отримати значення ключа (властивості) name, що знаходиться в об'єкті mother person.mother.name; //видалити елемент age delete(person.age) //додати (або оновити) ключ (властивість) person.eye = "карі"; //при роботі з масивами необхідно використовувати методи, призначені для роботи саме з масивами //видалити 1 елемент з масиву (метод splice) person.children.splice(1,1) //додати елемент масив (метод push) person.children. push("Катя");

Для перебору елементів в об'єкті можна використовувати цикл for.

For (key in person) ( if (person.hasOwnProperty(key)) ( //ключ = key //значення = person console.log("Ключ = " + key); console.log("Значення = " + person)) ; ) // якщо об'єкт person має key (якщо у person є властивість key) ) // переробити всі ключі (властивості) в об'єкті

Для перебору елементів масиву можна використовувати наступний цикл:

For (var i=0; i

Напевно, ви коли-небудь чули про JSON. Що це таке? Що він може та як його використовувати?

У цьому уроці ми розповімо про основи JSON і розкриємо наступні пункти:

• Що таке JSON?
• Навіщо використовується JSON?
• Як створити рядок JSON?
• Простий приклад рядка JSON.
• Порівняємо JSON та XML.
• Як працювати з JSON у JavaScript та PHP?

Що таке JSON?

JSON – простий, заснований на використанні тексту, спосіб зберігати та передавати структуровані дані. За допомогою простого синтаксису ви можете легко зберігати все, що завгодно, починаючи від одного числа до рядків, масивів та об'єктів у простому тексті. Також можна пов'язувати між собою масиви та об'єкти, створюючи складні структури даних.

Після створення рядка JSON, його легко відправити іншій програмі або в інше місце мережі, оскільки вона є простим текстом.

JSON має такі переваги:

• Він компактний.
• Його пропозиції легко читаються та складаються як людиною, так і комп'ютером.
• Його легко перетворити на структуру даних для більшості мов програмування (числа, рядки, логічні змінні, масиви і так далі)
• Багато мов програмування мають функції та бібліотеки для читання та створення структур JSON.

Назва JSON означає JavaScript Object Notation (подання об'єктів JavaScript). Як і представляє ім'я, він заснований на способі визначення об'єктів (дуже схоже створення асоціативних масивів в інших мовах) і масивів.

Навіщо використовується JSON?

Найчастіше поширене використання JSON – пересилання даних від сервера до браузера. Зазвичай дані JSON доставляються за допомогою AJAX, який дозволяє обмінюватися даними браузеру та серверу без необхідності перезавантажувати сторінку.

Користувач натискає на мініатюру продукту в онлайн магазині.

JavaScript, що виконується на браузері, генерує запит AJAX до скрипту PHP, запущеному на сервері, надаючи ID вибраного продукту.

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

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

Також можна використовувати JSON для надсилання даних від браузера на сервер, передаючи рядок JSON як параметр запитів GET або POST. Але цей метод має менше поширення, оскільки передача даних через запити AJAX може бути спрощена. Наприклад, ID продукту може бути включений в URL-адресу як частину запиту GET.

Бібліотека jQuery має кілька методів, наприклад getJSON() і parseJSON() , які спрощують отримання даних за допомогою JSON через запити AJAX.

Як створити рядок JSON?

Є кілька основних правил для створення рядка JSON:

• Рядок JSON містить або масив значень, або об'єкт (асоціативний масив пар ім'я/значення).
• Масивполягає у квадратних дужках ([ і ]) і містить розділений комою список значень.
• Об'єктполягає у фігурні дужки (( і )) і містить розділений комою список пар ім'я/значення.
• Пара ім'я/значенняскладається з імені поля, укладеного в подвійні лапки, за яким слідує двокрапка (:) і значення поля.
• Значенняв масиві або об'єкті може бути:
  • Числом (цілим або з плаваючою точкою)
  • Рядок (у подвійних лапках)
  • Логічним значенням (true чи false)
  • Іншим масивом (ув'язненим у квадратні дужки)
  • Інший об'єкт (ув'язнений у фігурні дужки)
  • Значення null

Щоб включити подвійні лапки в рядок, потрібно використовувати зворотну косу межу: \" . Так само, як і в багатьох мовах програмування, можна поміщати керуючі символи та шістнадцяткові коди в рядок, передуючи їх зворотною косою межею. Дивіться деталі на сайті JSON.

Простий приклад рядка JSON

Нижче наведено приклад оформлення замовлення у форматі JSON:

( "orderID": 12345, "shopperName": "Ваня Іванов", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "Супер товар", "quantity": 1 ), ( "productID": 56, "productName": "Диво товар", "quantity": 3)], "orderCompleted": true)

Розглянемо рядок докладно:

• Ми створюємо об'єкт за допомогою фігурних дужок ((і)).
• В об'єкті є кілька пар ім'я/значення: "orderID": 12345 Властивість з ім'ям "orderId" та цілочисловим значенням 12345 "shopperName": "Ваня Іванов" властивість з ім'ям "shopperName" та рядковим значенням "Ваня Іванов" "shopperEmail": " [email protected]" Властивість з ім'ям "shopperEmail" та рядковим значенням " [email protected]" "contents": [ ... ] Властивість з ім'ям "contents" , значення якого є масивом "orderCompleted": true Властивість з ім'ям "orderCompleted" і логічним значенням true
• У масиві "contents" є 2 об'єкти, що представляють окремі позиції на замовлення. Кожен об'єкт містить 3 властивості: productID, productName, і quantity.

До речі, оскільки JSON заснований на оголошенні об'єктів JavaScript, то ви можете швидко і просто зробити вище наведений рядок JSON об'єктом JavaScript:

var cart = ("orderID": 12345, "shopperName": "Ваня Іванов", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "Супер товар", "quantity": 1 ), ( "productID": 56, "productName": "Диво товар", "quantity": 3)], "orderCompleted": true);

Порівняння JSON та XML

У багатьох відношеннях ви можете розглядати JSON як альтернативу XML, принаймні у сфері веб-додатків. Концепція AJAX оригінально ґрунтувалася на використанні XML для передачі даних між сервером та браузером. Але останніми роками JSON стає все більш популярним для перенесення даних AJAX.

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

Ось як виглядатиме вище наведений приклад об'єкта на XML:

orderID 12345 shopperName Ваня Іванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Диво товар quantity 3 orderCompleted true

Версія XML має значно більший розмір. Насправді вона має довжину 1128 символів, а варіант JSON – лише 323 символи. Версію XML також досить важко сприймати.

Звісно, ​​це радикальний приклад. І можна створити більш компактний запис XML. Але навіть вона буде суттєво довшою за еквівалент на JSON.

Працюємо з рядком JSON у JavaScript

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

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

Створюємо рядок JSON зі змінної

JavaScript має вбудований метод JSON.stringify() , який бере змінну та повертає рядок JSON, що представляє її зміст. Наприклад, створимо об'єкт JavaScript, який містить відомості про замовлення з нашого прикладу, а потім створимо рядок JSON:

var cart = ("orderID": 12345, "shopperName": "Ваня Іванов", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "Супер товар", "quantity": 1 ), ( "productID": 56, "productName": "Диво товар", "quantity": 3)], "orderCompleted": true), alert (JSON.stringify(cart));

Цей код видасть:

Зауважте, що метод JSON.stringify() повертає рядок JSON без пробілів. Її складніше читати, але вона більш компактна передачі через мережу.

Існує кілька способів розібрати рядок JSON в JavaScript, але найбезпечніший і надійніший - використовувати вбудований метод JSON.parse(). Він отримує рядок JSON та повертає об'єкт або масив JavaScript, який містить дані. Наприклад:

var jsonString = " \ ( \"orderID": 12345, \ "shopperName": "Ваня Іванов", \ "shopperEmail": " [email protected]", \"contents": [\(\"productID": 34, \"productName": "Супер товар", \"quantity": 1\), \(\"productID": 56, \"productName": "Диво товар", \"quantity": 3 \ ) \ ], \ "orderCompleted": true \ ) \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

Ми створили змінну jsonString , яка містить рядок JSON нашого прикладу із замовленням. Потім ми передаємо цей рядок методу JSON.parse() , який створює об'єкт, який містить дані JSON і зберігає його в змінній cart . Залишається тільки здійснити перевірку, вивівши властивості об'єкта shopperEmail і productName масиву contents .

В результаті ми отримаємо наступний висновок:

У реальному додатку ваш JavaScript код отримуватиме замовлення у вигляді рядка JSON в AJAX відповіді від скрипта сервера, передавати рядок методу JSON.parse() , а потім використовувати дані для відображення на сторінці користувача.

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

Працюємо з рядком JSON у PHP

PHP, як і JavaScript, має вбудовані функції для роботи з рядками JSON.

Створюємо рядок JSON із змінної PHP

Функція json_encode() приймає змінну PHP і повертає рядок JSON, що містить зміст змінної. Ось наш приклад із замовленням, написаним на PHP:

Цей код повертає такий самий рядок JSON, як і в прикладі з JavaScript:

("orderID":12345,"shopperName":"Ваня Іванов","shopperEmail":" [email protected]","contents":[("productID":34,"productName":"Супер товар","quantity":1),("productID":56,"productName":"Диво товар","quantity": 3)],"orderCompleted":true)

У реальному додатку ваш скрипт PHP надішле цей рядок JSON як частину AJAX відповіді браузеру, де JavaScript код за допомогою методу JSON.parse() перетворює її назад на змінну для виведення на сторінці користувача.

Ви можете передавати різні прапори як другий аргумент функції json_encode() . За допомогою них можна змінювати принципи кодування змісту змінних у рядок JSON.

Створюємо змінну з рядка JSON

Для перетворення рядка JSON на змінну PHP використовується метод json_decode() . Замінимо наш приклад для JavaScript з методом JSON.parse() на код PHP:

Як і для JavaScript цей код видасть:

[email protected]Диво товар

За промовчанням функція json_decode() повертає об'єкти JSON як об'єкти PHP. Існують узагальнені об'єкти PHP класу stdClass. Тому ми використовуємо -> для доступу до властивостей об'єкта на прикладі вище.

Якщо вам потрібний об'єкт JSON у вигляді асоційованого масиву PHP, потрібно передати true як другий аргумент функції json_decode() . Наприклад:

$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";

Цей код видасть такий самий висновок:

[email protected]Диво товар

Також функції json_decode() можна передавати інші аргументи для вказівки глибини рекурсії та способів обробки великих цілих чисел.

Висновок

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

JSON (JavaScript Object Notation) – це формат передачі даних. З назви видно, що формат базується на мові програмування JavaScript, але він доступний і в інших мовах (Python, Ruby, PHP, Java).

JSON використовує розширення.json. При використанні його в інших файлових форматах (наприклад, .html) рядок JSON береться в лапки або надається змінним. Цей формат легко передається між веб-сервером та клієнтом або браузером.

Легкий і простий для сприйняття JSON – відмінна альтернатива XML.

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

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

Об'єкт JSON має вигляд "ключ-значення" і зазвичай записується у фігурних дужках. Під час роботи з JSON усі об'єкти зберігаються у файлі.json, але також можуть існувати як окремі об'єкти в контексті програми.

Об'єкт JSON виглядає так:

"first_name" : "John",
"last_name" : "Smith",
"location" : "London",
"online" : true,
"followers" : 987

Це дуже простий приклад. Об'єкт JSON може містити багато рядків.

Як бачите, об'єкт складається з пар «ключ-значення», які укладені у фігурні дужки. Більшість даних у JSON записується як об'єктів.

Між ключем і значенням ставиться двокрапка. Після кожної пари потрібно поставити кому. В результаті виходить:

"key": "value", "key": "value", "key": "value"

Ключ у JSON знаходиться ліворуч. Ключ потрібно поміщати у подвійні лапки. Як ключ можна використовувати будь-який валідний рядок. В рамках одного об'єкта всі ключі мають бути унікальними. Ключ може містити пробіл (first name), але при програмуванні можуть виникнути проблеми з доступом до такого ключа. Тому замість пропуску краще використовувати підкреслення (first_name).

Значення JSON знаходяться у правій частині стовпця. Як значення можна використовувати будь-який простий тип даних:

• Рядки
• Числа
• Об'єкти
• Масиви
• Логічні дані (true чи false)

Значення можуть бути представлені складними типами даних (наприклад, об'єктами або масивами JSON).

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

Як правило, дані у файлах.json записуються в стовпчик, однак JSON можна записати і в рядок:

( "first_name" : "John", "last_name": "Smith", "online" : true, )

Так зазвичай записуються дані JSON файли іншого типу.

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

"first_name" : "John",
"last_name" : "Smith",
"online" : true

Зверніть увагу: об'єкти JSON дуже схожі на об'єкти JavaScript, але це не той самий формат. Наприклад, JavaScript можна використовувати функції, а JSON не можна.

Головною перевагою JSON є те, що дані в цьому форматі підтримують багато популярних мов програмування, тому їх можна швидко передати.

Тепер ви знайомі з базовим синтаксисом JSON. Але файли JSON можуть мати складну, ієрархічну структуру, що включає вкладені масиви та об'єкти.

Складні типи в JSON

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

Вкладені об'єкти

Нижче ви знайдете приклад – файл users.json, який містить дані про користувачів. Для кожного користувача

(«John», «Jesse», «Drew», «Jamie») як значення передається вкладений об'єкт, який, у свою чергу, теж складається з ключів і значень.

Примітка: Перший вкладений об'єкт JSON виділено червоним.

"John": (
"username" : " John",
"location" : "London",
"online" : true,
"followers" : 987

"Jesse" : (
"username" : "Jesse",
"location" : "Washington",
"online": false,
"followers" : 432

"drew" : (
"username" : "Drew",
"location" : "Paris",
"online": false,
"followers" : 321

"jamie" : (
"username" : "Jamie",
"location" : "Berlin",
"online" : true,
"followers" : 654

Зверніть увагу: фігурні дужки використовуються і у вкладеному, і в основному об'єкті. Коми у вкладених об'єктах використовуються так само, як і у звичайних.

Вкладені масиви

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

Масив використовують передачі великої кількості даних, які можна згрупувати. Наприклад спробуємо записати дані про користувача.

{
"first_name" : "John",
"last_name" : "Smith",
"location" : "London",
"websites" : [

"description" : "work",
"URL" : "https://www.johnsmithsite.com/"

},
{

"desciption" : "tutorials",
"URL" : "https://www.johnsmithsite.com/tutorials"

"social_media" : [

"description" : "twitter",
"link": "https://twitter.com/johnsmith"

"description" : "facebook",
"link" : "https://www.facebook.com/johnsmith"

"description" : "github",
"link" : "https://github.com/johnsmith"

Ключам «websites» та «social_media» в якості значень присвоєно масиви, які поміщаються у квадратні дужки.

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

JSON чи XML?

XML (eXtensible Markup Language) дозволяє зберігати дані у зручному для сприйняття людини та машини вигляді. Формат XML підтримується великою кількістю програмних мов.

У XML та JSON дуже багато спільного. Однак XML вимагає набагато більше тексту, отже такі файли об'ємніші і їх складніше читати і писати. Більше того, XML обробляється лише за допомогою інтерпретатора XML, а JSON можна обробити за допомогою простої функції. На відміну від JSON, XML не може зберігати масиви.

Порівняємо два файли: вони містять однакові дані, але перший написаний у форматі XML, а другий в JSON.

users.xml

John London

Jesse Washington

Drew Paris

Jamie Berlin

users.json
("users": [

("username" : "John", "location" : "London"),
("username" : "Jesse", "location" : "Washington"),
("username" : "Drew", "location" : "Paris"),
("username" : "JamieMantisShrimp", "location" : "Berlin")

JSON – дуже компактний формат і не вимагає такої кількості тегів, як XML. Крім того, XML на відміну від JSON не підтримує масиви.

Якщо ви знаєте HTML, ви помітили, що формат XML дуже схожий на нього (зокрема тегами). JSON простіше, вимагає менше тексту та його простіше використовувати, наприклад, у програмах AJAX.

Звичайно, формат потрібно вибирати в залежності від потреб програми.

Інструменти для JSON

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

Більше інформації про сумісність та обробку JSON можна знайти на сайті проекту та в бібліотеці jQuery.

Писати JSON із нуля доводиться рідко. Зазвичай дані завантажуються з вихідних кодів або перетворюються на JSON. Ви можете перетворити CSV або дані з роздільниками табуляцією на JSON за допомогою відкритого інструменту Mr. Data Converter. Щоб перетворити XML на JSON і навпаки, використовуйте utilities-online.info . Під час роботи з автоматичними інструментами обов'язково перевіряйте результат.

Файли JSON (у тому числі й перетворені дані) можна перевірити за допомогою JSONLint . Щоб протестувати JSON у контексті веб-розробки, зверніться до JSFiddle .

Висновок

JSON – простий та легковажний формат даних. Файли JSON легко передавати, зберігати та використовувати.

Сьогодні JSON часто використовується в API.

Синтаксис JSON є підмножиною синтаксису JavaScript.

JSON синтаксичних правил

Синтаксис JSON виводиться із JavaScript синтаксису об'єкта позначення:

• Дані в пар ім'я / значення
• Дані розділені комами
• Фігурні дужки тримати об'єкти
• Квадратні дужки тримати масиви

JSON дані - ім'я та значення

Дані у форматі JSON записуються у вигляді пар ім'я / значення.

Пара ім'я / значення складається з імені поля (у подвійних лапках), за яким слідує двокрапка, за яким слідує значення:

приклад

"firstName":"John"

Імена JSON потребують подвійних лапок. Імена JavaScript немає.

Значення JSON

Значення JSON можуть бути:

• Ряд (ціле або з плаваючою точкою)
• Рядок (у подвійних лапках)
• Логічне (істина чи брехня)
• Масив (у квадратних дужках)
• Об'єкт (у фігурних дужках)

Об'єкти JSON

Об'єкти JSON записуються у фігурні дужки.

Так само, як JavaScript, об'єкти JSON може містити декілька ім'я / значень пар:

приклад

("firstName":"John", "lastName":"Doe")

Масиви JSON

JSON масиви записуються у квадратних дужках.

Так само, як JavaScript, масив JSON може містити декілька об'єктів:

приклад

"employees":[

("firstName":"Peter","lastName":"Jones")
]

У наведеному вище прикладі об'єкт "employees" являє собою масив, що містить три об'єкти. Кожен об'єкт є запис людини (з ім'ям та прізвищем).

JSON використовує JavaScript Синтаксис

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

За допомогою JavaScript ви можете створити масив об'єктів та призначити на нього дані, як це:

приклад

var employees = [
("firstName":"John", "lastName":"Doe"),
("firstName":"Anna", "lastName":"Smith"),
("firstName":"Peter","lastName": "Jones")
];

Перший запис до масиву об'єктів JavaScript можна отримати таким чином:

Крім того, можна отримати так:

Дані можуть бути змінені таким чином:

Вона також може бути змінена так:

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

файли у форматі JSON

• Тип файлу для JSON файлів ".json"
• Тип MIME для JSON тексту "application/json"

Що таке JSON і на що він здатний? У цій статті ви дізнаєтесь, як використовувати JSON для легкої роботи з даними. Також ми розглянемо, як працювати з JSON використовуючи при цьому PHP та JavaScript.

Якщо ви розробляли веб-сайти або веб-програми в цілому, найімовірніше ви чули про JSON принаймні швидкоплинним. Але, що саме означає JSON? Що може робити цей формат даних та як ним користуватися?

У цій статті ми дізнаєтесь про основи роботи з json форматом. Ми наслідуватимемо наступні теми:

• Що таке формат JSON?
• Як створити JSON рядки?
• Простий приклад JSON даних
• Порівняння JSON з XML

Давайте почнемо!

Що таке формат JSON?

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

Після створення JSON рядка, її легко можна пересилати в будь-який додаток або комп'ютер, так як це лише текст.

JSON має багато переваг:

• Він компактний
• Він зрозумілий для людей і легко зчитується комп'ютером
• Його легко можна перетворити на програмні формати: числові значення, рядки, булевий формат, нульове значення, масиви та асоціативні масиви.
• Майже всі програмні мови мають функції, що дозволяють зчитувати та створювати json формат даних.

Буквально, абревіатура JSON означає JavaScript Object Notation. Як описано раніше, цей формат ґрунтується на створенні об'єктів, щось подібне до асоціативних масивів в інших мовах програмування.

З якою метою використовується JSON?

Найбільше json використовується для обміну даними між JavaScript і серверною стороною (php). Іншими словами, для технології ajax. Це дуже зручно, коли ви передаєте кілька змінних чи цілі масиви даних.

Як це виглядає на прикладі:

Користувач кликає по превьюшке картинки

JavaScript обробляє цю подію та посилає ajax запит до PHP скрипту, передаючи ID картинки.

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

JavaScript отримує відповідь у вигляді JSON, обробляє дані, формує html код та виводить збільшене зображення з описом та іншою інформацією.

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

Всі улюблені jQuery мають функції getJSON() і parseJSON(), які допомагають працювати з форматом через ajax запити.

Як створити JSON рядки?

Нижче наведено основні правила створення JSON рядків:

• JSON рядок містить як масив значень, так і об'єкт (асоціативний масив з парами ім'я/значення).
• Масив повинен бути обгорнутий у квадратні дужки, [і], може містити список значень, що відокремлюються через кому.
• Об'єкти обертаються за допомогою фігурних дужок, (і ), також містять розділені комою пари ім'я/значення.
• Пари ім'я/значення складаються з імені поля (у подвійних лапках), після чого слідує двокрапка (:) , після значення даного поля.
• Значення в масиві або об'єкті можуть бути:
  • Числові (цілі або дробові з крапкою)
  • Рядкові (обгорнуті в подвійні лапки)
  • Логічні (true чи false)
  • Інші масиви (обгорнуті в квадратні дужки [і])
  • Інші об'єкти (обгорнуті у фігурні дужки ( і ))
  • Нульове значення (null)

Важливо! Якщо ви використовуєте подвійні лапки у значеннях, екрануйте їх за допомогою зворотного слішу: \". Також можна використовувати hex закодовані символи, так як ви це робите в інших програмних мовах.

Простий приклад JSON даних

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

( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true )

Давайте розберемо ці дані частинами:

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

Всередині об'єкта ми маємо кілька пар ім'я/значення:

"orderID": 12345 - поле з ім'ям orderId та значення 12345

"shopperName": "John Smith" - поле з ім'ям shopperName та значення John Smith

"shopperEmail": "[email protected]" - подібно, як і в попередньому полі, тут зберігається email покупця.

"contents": [...] - поле з ім'ям content, значення якого є масивом.

"orderCompleted": true - поле з ім'ям orderCompleted, значення якого true

Всередині масиву contents, ми маємо два об'єкти, які відображають вміст кошика. Кожен об'єкт продукту має три властивості: productID, productName, quantity.

Наостанок, оскільки JSON ідентичний з об'єктами JavaScript, ви легко можете взяти цей приклад і створити з нього JavaScript об'єкт:

var cart = ( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true);

Порівняння JSON з XML

У більшості випадків, ви будете думати про JSON як альтернативу XML формату - принаймні в рамках веб-додатків. Концепція Ajax в оригіналі використовує XML для обміну даними між сервером і браузером, але в останні роки JSON став більш популярним для передачі даних ajax.

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

Ось вищеописаний приклад JSON, тільки переписаний у XML форматі:

orderID 12345 shopperName John Smith shopperEmail [email protected] contents productID 34 productName SuperWidget quantity 1 productID 56 productName WonderWidget quantity 3 orderCompleted true

Як бачите в кілька разів довше, ніж JSON. По факту, цей приклад довжиною 1128 символів, в той час як JSON версія всього лише 323 символи. Також XML версію складніше читати.

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

Як працювати з JSON через PHP та JS?

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

Створення та читання JSON формату за допомогою JavaScript

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

На щастя, багато мов програмування надають інструменти для роботи з рядками JSON. Основна ідея яких:

Створення JSON рядків, ви починаєте з змінних містять деякі значення, потім пропускаєте їх через функцію, що перетворює дані на JSON рядок.

Читання JSON рядків, ви починаєте з JSON рядка, що містить певні дані, пропускаєте рядок через функцію, яка створює змінні містять дані.

Давайте подивимося, як це робиться у JavaScript.

Створюємо JSON рядок із JavaScript змінною

JavaScript має вбудований метод, JSON.stringify(), який приймає змінну JavaScript і повертає json рядок репрезентуючи вміст змінної. Наприклад, скористаємося раніше створеним об'єктом, сконвертуємо його в JSON рядок.

var cart = ( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true), alert (JSON.stringify(cart));

Ось що виведеться на екран:

("orderID":12345,"shopperName":"John Smith","shopperEmail":" [email protected]", "contents":[("productID":34,"productName":"SuperWidget","quantity":1), ("productID":56,"productName":"WonderWidget","quantity":3) ], "orderCompleted":true)

Зауважте, що JSON.stringify() виводить рядки JSON без пробілів. Складно читати, але так компактніше, що важливо при пересиланні даних.

Створюємо JavaScript змінну з JSON рядка

Існує кілька способів парсингу JSON рядків, найбільш прийнятний і безпечний, використовуючи JSON.parse() метод. Він приймає рядок JSON і повертає JavaScript об'єкт або масив містить дані JSON. Ось приклад:

var jsonString = " \ ( \ "orderID": 12345, \ "shopperName": "John Smith", \ "shopperEmail": " [email protected]", \"contents": [\(\"productID": 34, \"productName": "SuperWidget", \"quantity": 1\), \(\"productID": 56, \"productName": " WonderWidget", \"quantity": 3 \ ) \ ], \ "orderCompleted": true \ ) \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

Тут ми створювали змінну, jsonString, яка містить рядок JSON з раніше наданих прикладів. Після цього пропускали цей рядок через JSON.parse() для створення об'єкта, що містить JSON дані, які зберігаються в cart змінної. На кінець ми перевіряємо наявність даних і виводимо деяку інформацію засобами модального вікна alert.

Виведеться така інформація:

У реальному веб-додатку, ваш JavaScript код повинен приймати рядок JSON як відповідь від сервера (після посилки AJAX запиту), після чого парсіть рядок і виводьте дані про вміст кошика користувачу.

Створення та читання JSON формату за допомогою PHP

PHP, подібно JavaScript'у, має функції, що дозволяють конвертувати змінні в JSON формат, і навпаки. Давайте розглянемо їх.

Створення JSON рядки з PHP змінної

Json_encode() приймає PHP змінну та повертає JSON рядок, репрезентуючи дані змінної. Ось наш приклад «кошика» написаний на PHP:

Цей код виводить в точності такий результат, як і JavaScript приклад - валідний JSON рядок, що репрезентує вміст змінних:

("orderID":12345,"shopperName":"John Smith","shopperEmail":" [email protected]","contents":[("productID":34,"productName":"SuperWidget","quantity":1),("productID":56,"productName":"WonderWidget","quantity":3) ],"orderCompleted":true)

У реалії, ваш PHP скрипт повинен посилати JSON рядок як відповідь на AJAX запит, де JavaScript буде використовувати JSON.parse() для перетворення рядка на змінні.

У функції json_encode() можна вказувати додаткові параметри, що дозволяють конвертувати деякі символи hex.

Створення PHP змінної з JSON рядка

Аналогічно до вищеописаного, існує функція json_decode(), що дозволяє декодувати рядки JSON і поміщати вміст у змінні.

Як і у випадку з JavaScript, цей код виведе наступне:

[email protected] WonderWidget

За промовчанням json_decode() повертає JSON об'єкти як PHP об'єкти. Подібно до звичного синтаксису, ми використовуємо -> для доступу до властивостей об'єкта.

Якщо надалі ви захочете використовувати дані у вигляді асоціативного масиву, просто передайте другим параметрам true функції json_decode(). Ось приклад:

$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";

Це виводить той самий результат:

[email protected] WonderWidget

Також у функцію json_decode() можна передавати додаткові аргументи для визначення обробки великих чисел і рекурсії.

На закінчення про JSON формат

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