Многим приложениям нужно обмениваться данными между клиентом и сервером.
Долгое время эталонным форматом данных для обмена информацией между двумя объектами считался XML. Затем, в начале 2000-х, появился альтернативный формат JSON.
В данной статье вы узнаете все о JSON. Мы рассмотрим, что это, и как им пользоваться, а также разберем ряд популярных заблуждений.
Что такое JSON?
JSON (JavaScript Object Notation, нотация объектов JavaScript) - это текстовый формат обмена данными. Он представлен наборами пар "ключ-значение", причем ключ - это всегда строка, а значение может задаваться одним из следующих типов:
- число;
- строка;
- логическое значение;
- массив;
- объект;
- нулевое значение null.
Несколько важных правил:
- В формате данных JSON ключи прописываются в двойных кавычках.
- Ключ и значение разделяются двоеточием (:).
- Может быть несколько пар "ключ-значение". Каждая пара отделяется запятой (,).
- В данных JSON недопустимы комментарии (// или /* */). (Но при желании это ограничение можно обойти)
Ниже приведен пример простых данных в JSON:
{ "name": "Alex C", "age": 2, "city": "Houston" }
Допустимые данные в JSON возможны в 2 разных форматах:
- Набор пар «ключ-значение» в фигурных скобках
{...}
. Это показано в примере выше. - Упорядоченные списки пар «ключ-значение», разделенных запятой (,) и заключенных в квадратные скобки
[...]
. См. пример ниже:
[ { "name": "Alex C", "age": 2, "city": "Houston" }, { "name": "John G", "age": 40, "city": "Washington" }, { "name": "Bala T", "age": 22, "city": "Bangalore" } ]
Предположим, вы уже писали что-то на JavaScript. Тогда у вы можете ошибочно предположить, что формат JSON и объекты JavaScript (и массивы объектов) очень похожи. Но это не так. Чуть позже мы подробно об этом поговорим.
Структура JSON разработана на основе синтаксиса объектов JavaScript, и это единственное, что объединяет JSON и объекты JavaScript.
Формат JSON не зависит от языка программирования. Мы можем использовать JSON в Python, Java, PHP и многих других языках.
Примеры формата данных JSON
Сохранять данные JSON можно в файле с расширением .json
. Давайте создадим файл employee.json
с атрибутами сотрудника. Они представлены в виде ключей и значений.
{ "name": "Aleix Melon", "id": "E00245", "role": ["Dev", "DBA"], "age": 23, "doj": "11-12-2019", "married": false, "address": { "street": "32, Laham St.", "city": "Innsbruck", "country": "Austria" }, "referred-by": "E0012" }
В примере выше присутствуют следующие атрибуты сотрудника:
name
– имя сотрудника. Значение в строковом формате (String). Оно указано в двойных кавычках.id
– уникальный идентификатор сотрудника. Опять же, в строковом формате.role
– роли, которые сотрудник выполняет в организации. Таких ролей может быть несколько, поэтому лучше перечислять эти данные в формате массива (Array).age
– текущий возраст сотрудника. Это числовое значение (Number).doj
– дата найма сотрудника. Поскольку это дата, ее добавляют в двойных кавычках и обрабатывают как строку.married
– замужем/женат ли сотрудник? Ответом может быть да/нет (то естьtrue
илиfalse
), так что это логический формат (Boolean).address
– адрес сотрудника. Может состоять из нескольких частей: улица, город, страна, индекс и т.д. Такое поле лучше представлять в виде объекта (Object с парами «ключ-значение»).referred-by
– идентификатор сотрудника, который порекомендовал этого человека на должность в организацию. Если сотрудник пришел по рекомендации, то атрибут имеет значение. В остальных случаях поле остается пустым, т.е.null
.
Теперь давайте создадим набор данных по сотрудникам в формате JSON. Если мы хотим добавить несколько записей о разных сотрудниках, то необходимо прописать их в квадратных скобках [...]
.
[ { "name": "Aleix Melon", "id": "E00245", "role": ["Dev", "DBA"], "age": 23, "doj": "11-12-2019", "married": false, "address": { "street": "32, Laham St.", "city": "Innsbruck", "country": "Austria" }, "referred-by": "E0012" }, { "name": "Bob Washington", "id": "E01245", "role": ["HR"], "age": 43, "doj": "10-06-2010", "married": true, "address": { "street": "45, Abraham Lane.", "city": "Washington", "country": "USA" }, "referred-by": null } ]
Обратите внимание на значение атрибута referred-by
для сотрудника Боба Вашингтона (Bob Washington). Оно пустое. То есть никто из сотрудников не давал ему рекомендаций.
Как использовать данные JSON в качестве значения строки
Мы узнали, как форматировать данные внутри файла JSON. Еще можно использовать данные JSON в качестве строковых значений и присваивать их переменной. Поскольку JSON считается текстовым форматом, в большинстве языков программирования его можно обрабатывать как строку.
Давайте рассмотрим пример, как это делается JavaScript. Вы можете добавить данные JSON в одну строку. Перечисление делается через одинарные кавычки '...'
.
const user = '{"name": "Alex C", "age": 2, "city": "Houston"}';
Если вы хотите сохранить форматирование, то данные JSON лучше создавать с помощью шаблонных литералов (template literals).
const user = `{ "name": "Alex C", "age": 2, "city": "Houston" }`;
Кроме того, это очень удобное решение, если нужно создать данные JSON с динамическими значениями.
const age = 2; const user = `{ "name": "Alex C", "age": ${age}, "city": "Houston" }`; console.log(user); // Output { "name": "Alex C", "age": 2, "city": "Houston" }
Объекты JavaScript и JSON – это НЕ одно и то же
Формат данных JSON создавался на базе объектной структуры JavaScript. Но все сходства на этом заканчиваются.
Объекты в JavaScript:
- у объектов JavaScript могут быть методы, а у JSON – нет;
- ключи можно добавлять без кавычек;
- разрешены комментарии;
- отдельные сущности
Как преобразовать JSON в объект JavaScript и наоборот
В JavaScript есть 2 встроенных метода по преобразованию данных JSON в объекты JavaScript и наоборот.
Как преобразовать данные JSON в объект JavaScript
Для преобразования данных JSON в объект JavaScript используется метод JSON.parse()
. Он проводит синтаксический разбор (парсинг) допустимой строки JSON в объект JavaScript.
const userJSONData = `{ "name": "Alex C", "age": 2, "city": "Houston" }`; const userObj = JSON.parse(userJSONData); console.log(userObj);
Вывод:
Как преобразовать объект JavaScript в данные JSON
Для преобразования объекта JavaScript в данные JSON используется метод JSON.stringify()
.
const userObj = { name: 'Alex C', age: 2, city: 'Houston' } const userJSONData = JSON.stringify(userObj); console.log(userJSONData);
Вывод:
Должно быть, вы обратили внимание на слово JSON
, которое используется для вызова методов parse()
и stringify()
. Это встроенный объект JavaScript, который, хоть и называется JSON (хотя с тем же успехом он мог бы называться JSONUtil), но не имеет никакого отношения к формату JSON. Так что, пожалуйста, помните об этом.
Как обрабатывать ошибки "Unexpected token u in JSON at position 1" и другие?
При обработке JSON могут возникать ошибки. Это нормально. Например, при разборе данных JSON в объект JavaScript вдруг появляется следующее сообщение:
Если возникает такая ошибка, обязательно проверьте корректность ваших данных в JSON. Чаще всего причина синтаксического сбоя кроется в небольшой ошибке, которую вы случайно сделали в исходных данных JSON. Проверить правильность данных и форматов JSON можно с помощью JSON Linter.