Json для початківців, з використанням javascript і jquery

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

По-перше, ми створюємо змінну для зберігання наших даних, і потім ми, використовуючи JSON, визначаємо об'єкт. Наш об'єкт досить простий: поле firstName і значення Ray. Рядки в JSON обов'язково брати в лапки. Якщо ви використовуєте числа, лапки необов'язкові.

Даний приклад виведе в браузері значення властивості firstName.

Створення об'єкта placeholder

Давайте створимо більш реалістичний приклад: вставимо наші JSON дані в об'єкт DOM.

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

додаємо масиви

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

Виглядає трохи складніше, але насправді не складно для розуміння. Об'єкт JSON створюється за допомогою фігурних дужок; масив створюється за допомогою квадратних дужок. Отже, щоб організувати наші дані, ми створили об'єкт users. в який помістили масив. У масиві розташовуються інші об'єкти. Кожна пара (ім'я / значення) розділяються комою.

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

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

Реалізуємо список з користувачів (проходимо по об'єкту JSON)

Для перебору всіх властивостей об'єкта існує конструкція for..in:

Тут ми, проходимся по всіх елементах масиву; зберігаємо дані в змінної output і поміщаємо дані в елемент з id рівним placeholder. ви можете сказати, що наші дані будуються трохи повільно.

Читаємо JSON з зовнішнього файлу

Було б непогано зберегти дані на зовнішній файл і прочитати їх у міру потреби. Я збираюся використовувати бібліотеку jQuery і тому для початку нам потрібно підключити бібліотеку jQuery; потім викличемо функцію getJSON. Ось як виглядає наш код:

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

Як бачите, JSON реально легко Новомосковскется, і як тільки ви звикнете в дужках, вам стане легко кодувати.