Учебник по 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 Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

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

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

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

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

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


JavaScript JSON


JSON — это формат для хранения и передачи данных.

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


Что такое JSON?

  • JSON расшифровывается как J ava S cript Object Notation .
  • JSON — это облегченный формат обмена данными.
  • JSON не зависит от языка *
  • JSON «самоописывающий» и простой для понимания

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


Пример JSON

Этот синтаксис JSON определяет объект сотрудников: массив из 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"}
]

В приведенном выше примере объект «сотрудники» представляет собой массив. Он содержит три объекта.

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


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

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

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

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

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

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

const 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 .