JSON

1. JSON
JavaScript Object Notation

2. JSON – це синтаксис для зберігання даних і обміну даними.
JSON легко читається людиною.
Обмін даними
При обміні даними між браузером і сервером дані можуть
бути тільки текстовими.
JSON є текстом і ми можемо конвертувати будь-який
JavaScript об’єкт у JSON, а потім передати JSON на сервер.
Ми також можемо конвертувати будь-який JSON, отриманий
з сервера, у JavaScript об’єкт.
Таким чином ми можемо працювати з даними як з JavaScript
об’єктами, без складного парсингу і перетворень.

3. JSON синтаксис
Синтаксис JSON є підвидом синтаксису JavaScript.
Правила:
Дані подаються парами ім‘я/значення: "name":"value"
Дані розділяються комами
Об’єкти поміщаються в фігурні дужки {…}
Масиви поміщаються в квадратні дужки […]
Приклад подачі даних:
{"name":"Вася","age":28}
Ключі і рядкові величини повинні бути в подвійних
лапках.
У JavaScript можна було б подати так:
{"name":'Вася','age':28}

4. Операції з об’єктами
Приклад створення об’єкта у JavaScript:
var person = { "name":"Вася", "age":28,
"city":"Луцьк" };
Доступ до властивостей об’єктів:
alert(person.name); // Вася
або
alert(person["name"]); // Вася
Зміна даних:
person.name = "Коля";
або
person["name"] = "Коля";
JavaScript об’єкти можуть використовуватись як JSON, це
саме стосується масивів.

5. JSON і XML
Дані зручно зберігати як у форматі XML, так і у JSON.
Приклад XML:
<employees>
<employee>
<firstName>John</firstName>
<lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName>
<lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName>
<lastName>Jones</lastName>
</employee>
</employees>

6. Приклад JSON
{"employees":[
{ "firstName":"John",
"lastName":"Doe" },
{ "firstName":"Anna",
"lastName":"Smith" },
{ "firstName":"Peter",
"lastName":"Jones" }
]}

7. Подібності JSON і XML:
• JSON і XML – формати з “самоописом”
(зручні для сприйняття людиною)
• JSON і XML мають ієрархічну структуру
(величини всередині величин)
• JSON і XML сприймаються дуже
багатьма мовами програмування
• JSON і XML можна передавати через
XMLHttpRequest

8. Відмінності JSON і XML:
•JSON не використовує тегів
•JSON коротший
•JSON швидше читати і писати
•JSON може використовувати масиви
Головне:
XML повинен парситись XML парсером, а
JSON можна парсити стандартними
функціями JavaScript.

9. Про відмінності JSON і JavaScript:
var myObj = { "name":"Вася", "age":31,
"city":"Луцьк" };
alert(myObj); // [object Object]
var myJSON = JSON.stringify(myObj);
alert(myJSON); //
{"name":"Вася","age":31,"city":
"Луцьк"}

10. Типи даних у JSON:
• рядкові
• числові
• об’єкти (JSON об’єкти)
• масиви
• логічні (true/false)
• null
Не можуть бути даними у JSON:
• функції
• дати (date)
• undefined

11. Величинами у JSON можуть бути JSON
об’єкти (подані за належним синтаксисом).
Наприклад:
{
"employee":{ "name":"Вася",
"age":28, "city":"Луцьк" }
}
Таблиці у JSON:
{
"employees":[ "Вася", "Коля", "Маруся" ]
}

12. Операції з об’єктами
Доступ через крапковий синтаксис:
myObj = { "name":"Вася", "age":30, "car":null };
x = myObj.name;
або через []:
x = myObj["name"];
Перебір властивостей:
for (x in myObj) {
demo.innerHTML += x + "<br>";
}

13. Для доступу до значень властивостей можна
використати квадратні дужки:
var myObj = { "name":"Вася", "age":28, "car":null };
for (x in myObj) {
demo.innerHTML += myObj[x] + "<br>";
}
Вкладені об’єкти:
myObj = {
"name":"Вася",
"age":28,
"cars": {
"car1":"Ford","car2":"BMW","car3":"Fiat"
}
}
x = myObj.cars.car2; //або:
x = myObj.cars["car2"];

14. Аналогічно можна змінювати величини в
JSON об‘єктах:
myObj.cars.car2 = "Mercedes";
або
myObj.cars["car2"] = "Mercedes";
Видалення властивостей:
delete myObj.cars.car2;

15. Масиви в JSON
Допустимі типи даних у JSON масивах:
string, number, object, array,
boolean, null
У JavaScript – все перераховане плюс
функції, дати і undefined.
Масиви можуть бути значеннями
властивостей JSON об’єктів
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}

16. Значення з масиву можна отримати (чи
змінити) через індекс:
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
"name":"Вася",
"age":28,
"cars":[ "Ford", "BMW", "Fiat" ]
};
x = myObj.cars[0];
demo.innerHTML = x; // Ford
</script>

17. Цикли по масивах:
for (i in myObj.cars) {
x += myObj.cars[i];
}
або
for (i = 0; i <
myObj.cars.length; i++) {
x += myObj.cars[i];
}

18. Величини в масивах можуть бути іншими масивами
або навіть іншими JSON об’єктами:
myObj = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[
"Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[
"320", "X3", "X5" ] },
{ "name":"Fiat", "models":[
"500", "Panda" ] }
]
}

19. Перебір значень у випадку вкладених об’єктів:
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"Вася",
"age":28,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus",
"Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
for (i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
}
}
demo.innerHTML = x;
</script>

20. Видалення елементів масивів:
delete myObj.cars[1];
Задача 85.0
Відкрийте файл books.xml (доступний тут:
goo.gl/KQwAqs ) і створіть за цими даними
об’єкт catalog.
Виведіть дані з об’єкта на сторінку.

21. Розв’язок
<p id="info"></p>
<script>
var x = "";
var catalog = {
"books": [
{ "author":"Умберто Еко", "title":"Бавдоліно", "pages":
444},
{ "author":"Салман Рушді", "title":"Джозеф Антон",
"pages": 728},
{ "author":"Юрій Виничук", "title":"Чорт зна що",
"pages": 792},
{ "author":"Герман Гессе", "title":"Гра в бісер",
"pages": 510}
]
}
for (i in catalog.books) {
x += "<h2>" + catalog.books[i].author + "</h2>";
x += "<p>" + catalog.books[i].title + ", сторінок: " +
catalog.books[i].pages + "</p>";
}
info.innerHTML = x;
</script>

22. Задача 85.1
Додайте кнопки “Видалити першу книгу” і
“Видалити останню книгу” з відповідними
діями над об’єктом.

23. Розв’язок
<button onclick="deleteFirstBook()">Видалити першу книгу</button>
<button onclick="deleteLastBook()">Видалити останню книгу</button>
<script>
var x;
var catalog = { } // див. вище
showBook();
function showBook(){
x = "";
for (i in catalog.books) {
x += "<h2>" + catalog.books[i].author + "</h2>";
x += "<p>" + catalog.books[i].title + ", сторінок: " +
catalog.books[i].pages + "</p>";
}
info.innerHTML = x;
}
function deleteFirstBook(){
delete catalog.books[0];
showBook();
}
function deleteLastBook(){
delete catalog.books[catalog.books.length-1];
showBook();
}
</script>

24. JSON.parse()
JSON зазвичай використовується для
обміну даними з сервером.
При отриманні даних з сервера вони
завжди мають рядковий тип.
Якщо застосувати до даних JSON.parse(),
вини стануть JavaScript об’єктом.

25. Наприклад, ми отримуємо з сервера дані у
формі:
'{ "name":"Вася", "age":28,
"city":"Луцьк"}'
Використаємо JavaScript функцію
JSON.parse() щоб ковертувати текст у
JavaScript об’єкт:
var obj = JSON.parse('{
"name":"Вася", "age":28,
"city":"Луцьк"}');
Слід уважно дотримуватись синтаксису
JSON!

26. Приклад взаємодії JSON і AJAX.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 &&
this.status == 200) {
myObj =
JSON.parse(this.responseText);
demo.innerHTML = myObj.name;
}
};
xhttp.open("GET", "json_demo.txt",
true);
xhttp.send();

27. Вміст файлу json_demo.txt:
{
"name":"John",
"age":31,
"pets":[
{ "animal":"dog", "name":"Fido"
},
{ "animal":"cat", "name":"Felix"
},
{ "animal":"hamster",
"name":"Lightning" }
]
}

28. JSON.stringify()
Для конвертування JavaScript об’єкта у
рядкову величину використовується
JSON.stringify() .
Приклад:
<p id="demo"></p>
<script>
var obj = { "name":"Вася", "age":28,
"city":"Луцьк"};
var myJSON = JSON.stringify(obj);
demo.innerHTML = myJSON;
</script>

29. Аналогічно можна діяти з масивами:
<p id="demo"></p>
<script>
var arr = [ "Вася", "Коля", "Маруся",
"Люба" ];
var myJSON = JSON.stringify(arr);
demo.innerHTML = myJSON;
</script>

30. Stringify перетворює дані в рядки, а
функції просто видаляє.
<p id="demo"></p>
<script>
var obj = { "name":"Вася",
"age":function () {return 28;},
"city":"Луцьк", "date": new Date()};
var myJSON = JSON.stringify(obj);
demo.innerHTML = myJSON;
</script>
Виводить:
{"name":"Вася","city":"Луцьк","date":"
2017-07-19T11:34:00.181Z"}