img

Что такое JSON простыми словами

Многим приложениям нужно обмениваться данными между клиентом и сервером.

Долгое время эталонным форматом данных для обмена информацией между двумя объектами считался 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);  

Вывод:

JSON.parse()

Как преобразовать объект JavaScript в данные JSON

Для преобразования объекта JavaScript в данные JSON используется метод JSON.stringify().

const userObj = {
    name: 'Alex C', 
    age: 2, 
    city: 'Houston'
}

const userJSONData = JSON.stringify(userObj);
console.log(userJSONData);  

Вывод:

JSON.stringify()

Должно быть, вы обратили внимание на слово JSON, которое используется для вызова методов parse() и stringify(). Это встроенный объект JavaScript, который, хоть и называется JSON (хотя с тем же успехом он мог бы называться JSONUtil), но не имеет никакого отношения к формату JSON. Так что, пожалуйста, помните об этом.


Как обрабатывать ошибки "Unexpected token u in JSON at position 1" и другие?

При обработке JSON могут возникать ошибки. Это нормально. Например, при разборе данных JSON в объект JavaScript вдруг появляется следующее сообщение:

Синтаксическая ошибка JSON

Если возникает такая ошибка, обязательно проверьте корректность ваших данных в JSON. Чаще всего причина синтаксического сбоя кроется в небольшой ошибке, которую вы случайно сделали в исходных данных JSON. Проверить правильность данных и форматов JSON можно с помощью JSON Linter.

Ссылка
скопирована
Программирование
Скидка 25%
Фронтенд-разработчик с нуля
Погрузитесь в мир веб-разработки, освоив основные инструменты работы: HTML, CSS, JavaScript. Научитесь работать с дизайн-макетами и адаптивной версткой, сверстаете свои первые страницы и поймете, как строить карьерный трек в ИТ.
Получи бесплатный
вводный урок!
Пожалуйста, укажите корректный e-mail
отправили вводный урок на твой e-mail!
Получи все материалы в telegram и ускорь обучение!
img
Еще по теме:
img
Алгоритм – это набор четко сформулированных инструкций, который применяется для решения конкретной задачи. Эти задачи вы можете
img
В начале пути веб-разработки вы, скорее всего, часто будете слышать такие понятия, как аутентификация (authentication) и авториз
img
Обмен сообщениями Publish/Subscribe, также известный как Pub/Sub, - это асинхронный метод связи между службами, который использу
img
Процесс анализа программного кода должен быть максимально автоматизирован. Когда вы создаете запрос на включение изменений, как
img
Что такое DOM? DOM (Document Object Model) – это объектная модель документа. Это интерфейс между JavaScript и веб-браузером. 
img
Давайте рассмотрим следующую ситуацию: Санта приносит игрушки всем хорошим девочкам и мальчикам.  На 2019 год в мире проживало
Комментарии
ВЕСЕННИЕ СКИДКИ
40%
50%
60%
До конца акции: 30 дней 24 : 59 : 59