ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JS Учебник

JS Старт JS Введение JS Установка JS Вывод JS Объявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметические JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строки JS Числа JS Методы числа JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы Формы API

JS Объекты

Определения объектов Свойства объекта Методы объекта Доступ к объектам Конструкторы объектов Прототипы объектов Объект ECMAScript 5

JS Функции

Определения функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS HTML DOM

DOM Введение DOM Методы DOM Документ DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель событий DOM Навигация DOM Узлы DOM Коллекции DOM Узловые списки

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Отклик AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON и XML JSON Типы данных JSON Анализ JSON Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Input JS HTML Объекты JS HTML События JS Броузер JS Упражнения JS Викторина JS Сертификат

JS Справочники

JavaScript Объекты HTML DOM Объекты

JavaScript. Уроки для начинающих

JavaScript JSON


JSON - это формат для хранения и транспортировки данных.

JSON часто используется, когда данные отправляются с сервера на веб-страницу.


Что такое JSON?

  • JSON означает JavaScript Object Notation (обозначение объекта JavaScript)
  • JSON - это легкий формат обмена данными
  • JSON не зависит от языка *
  • JSON "самоописывает себя" и прост для понимания

* Синтаксис JSON получен из синтаксиса нотации объектов JavaScript, но формат JSON является только текстовым. Код для чтения и генерации данных JSON может быть написан на любом языке программирования.


JSON Пример

Этот синтаксис JSON определяет объект employees (список сотрудников): массив из 3 записей сотрудников (объектов):

JSON Пример

{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}

Формат JSON определяет объекты JavaScript

Формат JSON синтаксически идентичен коду для создания объектов JavaScript.

Из-за этого сходства программа JavaScript может легко конвертировать данные JSON в нативные объекты JavaScript.


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

  • Данные в парах имя/значение
  • Данные разделяются запятыми
  • Фигурные скобки содержат объекты
  • Квадратные скобки содержат массивы

Данные JSON - имя и значение

Данные JSON записываются в виде пар имя/значение, так же, как свойства объекта JavaScript.

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

"firstName":"John"

Имена JSON требуют двойных кавычек. Имена JavaScript не требуют.


JSON Объекты

Объекты JSON написаны в фигурных скобках.

Как и в JavaScript, объекты могут содержать несколько пар имя / значение:

{"firstName":"John", "lastName":"Doe"}

JSON Массивы

JSON массивы пишутся в квадратных скобках.

Как и в JavaScript, массив может содержать объекты:

"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]

В приведенном выше примере объект "employees" является массивом. Он содержит три объекта.

Каждый объект - это запись про человека (с именем и фамилией).


Преобразование текста JSON в объект JavaScript

Обычно JSON используется для чтения данных с веб-сервера и отображения данных на веб-странице.

Для простоты это можно продемонстрировать, используя строку в качестве входных данных.

Сначала создайте строку JavaScript, содержащую синтаксис JSON:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Затем используйте встроенную функцию JavaScript JSON.parse(), чтобы преобразовать строку в объект JavaScript:

var obj = JSON.parse(text);

Наконец, используйте новый объект JavaScript на своей странице:

Пример

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
Попробуйте сами »

Вы можете прочитать больше о JSON в JSON учебнике на нашем сайте.