Использование формата JSON

Формат JSON (от англ. JavaScript Object Notation) — это текстовый формат для передачи данных. Т.е. JSON произошел из JavaScript, но он также часто используется для передачи данных в языках Python, Ruby, PHP и Java, т.к. многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

Формат JSON подразумевает, что вы можете хранить данные в нем в файлах с расширением .json. Кроме того, он может существовать в других форматах файлов, например, в .html или .js,  но в них вы должны использовать JSON  в виде строки, т.е. текста в кавычках. Также JSON может быть объектом, присвоенным в переменную. Такой формат легко передавать между сервером и клиентской частью, т.е. с помощью браузера.

В последнее время JSON постепенно вытесняет формат XML за счет того, что он легко читаем, компактен  и требует куда меньше усилий для форматирования контента. Здесь мы рассмотрим, как можно использовать JSON, узнаем о его синтаксисе и методах для работы с этим форматом.

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

Объект JSON предполагает, что данные передаются в виде пар ключ-значение, заключенных в фигурные скобки. Например:

Итак, формат JSON предполагает, что вы указываете сначала две фигурные скобки { }, внутри которых записываете данные в формате ключ-значние. Ключ - это всегда строка в двойных (!и только в двойных) кавычках, а значение - либо тоже строка в двойных кавычках, либо число, либо логическое true|false, либо null, либо массив.

Когда вы создаёте ключи, лучше всего использовать строку с латинскими символами без пробелов, можно в Camel-синтаксисе или с нижним подчеркиванием, например: "companyName", "company_name", но не "company name".

Особенности JSON

• JSON - это формат данных - он содержит только свойства, а не методы.
• JSON в обязательном порядке требует двойных кавычек, которые будут использоваться вокруг строк и имен свойств. Одиночные кавычки недействительны.
• Можно легко допустить шибки в JSON, т.к. даже одна лишняя или забытая запятая или двоеточие может привести к сбою JSON-файла, в результате чего весь ваш код перестанет работать. Имеет смысл  проверять JSON с помощью приложения, такого как JSONLint.
• JSON позволяет работать со строками, числами, булевыми величинами, null, массивами или объектами. Причем строки записываются в двойных кавычках, а числа, true|false и null - без.

Для того чтобы проще было работать с JSON, можно установить дополнительные расширения для вашего редактора кода. Например, плагин JSON snippets для Visual Studio Code позволяет преобразовывать данные в строки в процессе набора текста.

В том числе с его помощью  можно создавать данные в формате json в различных языках программирования (JavaScript, TypeScript и т.д.):

Методы JavaScript для работы с JSON

JavaScript предоставляет методы для работы JSON-форматом:

• JSON.stringify() для преобразования объектов в JSON.
• JSON.parse() для преобразования JSON обратно в объект.

Метод JSON.stringify()

Первый метод JSON.stringify() мы используем для преобразования данных в различных JavaScript-форматах в строку, которая будет отвечать синтаксису JSON.

Например,

Все пары ключ-значение теперь имеют обрамление в виде двойных кавычек, массивы остались массивами, числовые значения, значение true, false и null остались без изменения.

Это простой способ использования метода JSON.stringify(). Но у него есть еще 2 необязательных параметра:

Параметр replacer метода JSON.stringify()

Параметр replacer подразумевает использование функции или массива свойств для кодирования, который будет выбран из всех переданных значений. Например, если нет необходимости передавать или публиковать часть данных:

Результат работы параметра replacer в виде массива (для вывода console.log заменен на document.write):

Использование функции function(key, value) в параметре replacer подразумевает, что мы перебираем все свойства объекта по ключу (key) или значению (value) в соответствии с неким условием и оставляем только те свойства, которые этому условию удовлетворяют. Например, нам нужно отсортировать фамилии только с положительным дебетом

Результат  - 2 из 5 элементов массива:

Параметр space метода JSON.stringify()

Третий необязательный параметр метода JSON.stringify() называется  space и указывает количество пробелов (отступов) для красивого форматирования строки в JSON-формате. Для передачи данных это необязательно, для вывода информации - будет смотреться красиво. В качестве значения параметра space можно использовать целое число или знак табуляции.

Можем посмотреть в консоли на разницу в форматировании:

Метод JSON.parse()

Метод JSON.parse() , напротив, предназначен для преобразования данных из строки в объект JavaScript.

Например, у нас есть json-файл с данными о работниках некоей фирмы (все совпадения имен-фамилий - случайны, это выдуманная фирма с выдуманными сотрудниками, email-ами и телефонами), которые необходимо вывести в виде таблицы. Содержимое JSON-файла выглядит так (кстати, очень пригодился JSONLint, т.к. при форматировании было допущено несколько ошибок):

То есть в начале файла идёт информация о самой фирме, а затем - данные о сотрудниках в виде массива. Этот файл для начала необходимо загрузить, а затем распределить данные в div и таблицу. Для этого в html-файле создадим простую разметку внутри body:

Затем пишем скрипт:

В скрипте мы сначала получаем в ответе от сервера текстовые данные, которые записываем в переменную dataTable с помощью метода JSON.parse():

А затем вызываем в функцию getTableInfo(), которая делает разбор данных и добавляет их в div и таблицу. Для разбора массива мы используем метод forEach(), а перед этим убедимся, что после JSON.parse() у нас остался именно массив:

Для добавления элементов мы воспользуемся методами document.createElement(), appendChild() и свойством innerHTML.

Обратите внимание на использование обратных кавычек и переменных вида ${var_name} - это шаблонные литералы, добавленные в синтаксис стандарта ES6 , принесшего немало интересных фишек в JavaScript.

Сам пример вживую (открыть в новой вкладке):

Еще один пример загрузки JSON-файла вы найдете в статье  с соответствующим названием "Использование AJAX для загрузки JSON-данных".

Параметр reviver метода JSON.parse()

Как и JSON.stringify(), метод JSON.parse() может быть вызван со вторым необязательным параметром reviver (см. документацию на MDN), который представляет собой вызов функции вида function(key, value), последовательно перебирающей все значения JSON-строки. В функции можно по какому-либо условию отсортировать значения ключей или сами ключи и вывести несколько измененный вариант JSON-данных. Важным моментом здесь является то, что функция в конце перебирает и всю строку, поэтому желательно в функции отслеживать ключ в виде пустой строки (key==='') во избежание неприятностей: 

В данном примере нам необходимо было для вывода информации получить JSON-данные в виде неких баллов, полученных, например, при тестировании неким человеком, поэтому числовые значения мы умножали на 10 и добавляли к результату строку "баллов":

В результате получим в консоли следующий объект:

Получение данных JSON-файла с помощью jQuery

В jQuery есть специальный метод $.getJSON, который позволяет простым способом получить информацию из внешнего источника, загрузив JSON-файл методом GET. Вы можете посмотреть пример загрузки файла с актуальными курсами валют с  API Приватбанк в соответствующей статье.

Практика: отправка простой формы с помощью JSON

Рассмотрим вариант с отправкой данных в формате JSON из простой формы, в которой будет несколько полей и кнопка submit. В результате работы формы будет отправлено письмо на указанный в форме email. Поэтому имеет смысл указывать тот ящик, который вы сможете потом проверить. Отправлено письмо будет с помощью AJAX. Мы рассмотрим сначала вариант кода на чистом JavaScript.

Разметка формы:

В html-коде нужно обратить внимание на атрибут action тега <form> и на отсутствие у кнопки submit атрибута name, т.к. они в дальнейшем повлияют на восприятие JS-кода. Также в самом низу присутствует пустой тег <div id="sendMessage"></div>, в который затем мы будем выводить сообщение об отправке формы или об ошибке.

Код JavaScript

В этом скрипте мы собираем в переменную-объект data данные в виде пар имя input = значение input, причем только в том случае, если поле input имеет атрибут name. Этого атрибута не имеет только кнопка submit, поэтому ее данные не войдут в объект data и не будут отправлены на сервер. Для отправки мы преобразуем объект в строку в формате JSON и формируем AJAX-запрос и отправляем его на тот url, который указан в атрибуте action. В случае ошибки запроса выводим текст ошибки в <div id="sendMessage"></div>, в случае успеха - выводим то сообщение, которое выдаст нам PHP-скрипт и очищаем форму.

Несколько строк с методом alert() закомментированы. Вы можете убрать комментарии, чтобы посмотреть без консоли на данные в AJAX-запросе.

Код PHP

В php-файле мы декодируем формат JSON json_decode() в переменную $data а затем "разбираем" ее на отдельные переменные, причем их имена будут совпадать с именами input-ов (атрибут name). Затем эти переменные используем для формирования письма.

Смотрим пример в действии:

Если вы откроете пример в новой вкладке и перед тестированием запустите консоль, то увидите примерно следующее (в зависимости от того, как заполнили поля):

Практический пример: использование JSON для генерации случайной цитаты

В примере ниже вы не будете загружать файл формата JSON или отправлять данные. Вы используете этот формат для хранения массива цитат и выбираете одну из них, генерируя случайное число с помощью Math.random() при клике на кнопку. Код простой, но, возможно, вы придумаете ему еще какое-то применение.

See the Pen JSON Random Quote Generator by Dudley Storey (@dudleystorey) on CodePen.