img

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

21 ноября
20:00
Бесплатный вебинар
Введение в Docker
Ведущий — Филипп Игнатенко.
Руководитель центра разработки
Записаться
img
img

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

Долгое время эталонным форматом данных для обмена информацией между двумя объектами считался 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
Виртуализация серверов позволяет запускать несколько виртуальных машин на одном физическом сервере. Запуск виртуальных машин (ВМ
img
Сегодня мы рассмотрим, как настроить и использовать PHP в проекте. Но прежде чем начать, нужно понять, что такое PHP. Что такое
img
Как разработчик, вы знаете, что HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста). HTML — это язык
img
Бесконечные споры вокруг искусственного интеллекта приводят к путанице. Существует много терминов, которые кажутся похожими, но
img
SVG расшифровывается как масштабируемая векторная графика. Это веб-дружелюбный векторный формат файлов, используемый для отображ
21 ноября
20:00
Бесплатный вебинар
Введение в Docker