Что такое формат JSON и как с ним работать

JSON — это формат обмена данными, без которого не обходится ни один современный проект, где есть передача информации. Он используется в API, при хранении настроек приложений и работе с базами данных. Из-за простого синтаксиса, универсальности и удобства JSON стал стандартом для передачи данных. 

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

Что такое JSON

JSON (JavaScript Object Notation) — это текстовый формат для передачи данных. Он прост, легко читается как человеком, так и машиной, и стал стандартом в современной веб-разработке.

Определение и история

JSON первоначально разработал Дуглас Крокфорд в начале 2000-х. Он заметил, что структура данных в объектах JavaScript отлично подходит для обмена информацией, и создал простой и универсальный формат. Сегодня JSON стал стандартом для передачи данных и используется практически во всех популярных языках.

JSON позволяет хранить и передавать данные между сервером и приложением, поэтому он повсюду: в API, веб-приложениях, базах данных и даже в мобильных играх.

Структура JSON

Все данные в JSON представляются в виде структуры «ключ-значение», где ключи — это строки, а значения могут быть разными типами данных. 

Допустим, у нас есть магазин с системой бонусов, которые начисляются по скидочной карте. Когда продавец считывает карту, он должен получить от сервера такие данные:

Всё это он получает в виде JSON-ответа, который имеет вот такую структуру:

{
  "firstname": "Михаил",
  "lastname": "Максимов",
  "phone": "+79201234567",
  "city": "Москва",
  "age": 37,
  "bonus": 2000,
  "prev": [
    "Кроссовки",
    "Турник",
    "Зимняя куртка"
  ]
}

Что тут важно:

Так как JSON — универсальный формат передачи данных, то он может работать только с теми данными, которые есть в большинстве языков:

То, что не входит в этот список, JSON не обработает — и не выдаст сообщение об ошибке, потому что JSON — это просто формат данных и за его правильностью должен следить программист.

Дальше подробно рассмотрим типы данных, которые тут используются.

Объекты (Objects)

Объекты — это основная структура JSON. Они используются для объединения данных в логичные группы. Каждый объект записывается в фигурных скобках {}, а его содержимое — это пары «ключ-значение», разделённые запятыми.

То, что мы посмотрели в прошлом разделе, это и есть объект:

{
  "firstname": "Михаил",
  "lastname": "Максимов",
  "phone": "+79201234567",
  "city": "Москва",
  "age": 37,
  "bonus": 2000,
  "prev": [
    "Кроссовки",
    "Турник",
    "Зимняя куртка"
  ]
}

Объекты нужны для описания сложных сущностей: профиля пользователя, данных заказа, характеристик товара и так далее. В объекте мы можем хранить данные о пользователе и получать доступ к нужной информации. 

Массивы (Arrays)

Массивы — это списки данных, которые записываются в квадратные скобки []. Они могут содержать строки, числа, объекты или даже другие массивы.

Это массив:

"prev": [
  "Кроссовки",
  "Турник",
  "Зимняя куртка"
]

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

Строки (Strings)

Строки — это текстовые данные в JSON, записанные в двойных кавычках. Они используются для хранения любой текстовой информации: имён, адресов, описаний и других данных. Строки могут быть простыми или содержать специальные символы — переносы строк или кавычки, которые нужно экранировать. Например:

"description": "Эта статья — \"лучший выбор\" для тех, кто хочет разобраться в JSON с нуля.",

Числа (Numbers)

Числа в JSON могут быть целыми или дробными. Их используют для хранения данных — возраста, цены, количества товаров. JSON поддерживает и отрицательные числа, и ноль:

"balance": -500,
"discount": 0

Логические значения (Boolean)

Логические значения — это true или false. Они нужны для вопросов типа «Да/Нет» и используются для флагов или условий.

"isStudent": false,
"hasDiscount": true

Такие значения удобно использовать, чтобы указать, активен ли пользователь, участвует ли товар в распродаже и так далее.

Пустые значения

null в JSON означает «ничего» или отсутствие значения. Его используют, если данные пока неизвестны или их нужно очистить. В практике это бывает полезно для указания, что у пользователя нет какого-либо значения, например отчества или дополнительного телефона.

"middleName": null

Преимущества JSON

Кроме JSON, для обмена и хранения информации используют и другие форматы. У каждого из них свои сильные и слабые стороны. Разберём их подробнее.

Допустим, у нас есть вот такой JSON-файл, который описывает структуру меню интерфейса:

{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

Посмотрим, как его можно было бы описать в других форматах.

Сравнение с другими форматами (XML, YAML)

XML — формат, который появился до JSON и широко использовался для решения тех же задач. Его синтаксис основан на тегах, похожих на HTML:

<menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu>

Одновременно это и недостаток: теги дублируются и делают XML-файл более громоздким и сложным для восприятия. Там, где JSON использует лаконичные конструкции, XML требует многословных описаний. И поскольку в JSON более компактный формат, это позволяет быстрее передавать данные по сети и экономить трафик.

Но у XML есть свои плюсы: он допускает атрибуты для создания более гибкой структуры данных. В нашем примере это id, value, onclick. Атрибуты хранят дополнительные данные прямо внутри тега.

XML также хорошо работает со сложными вложенными структурами. Его часто используют в старых системах и проектах, где он стал стандартом, например в банковских или правительственных приложениях.

Хорошо поддерживается в Java, C#, Python, но требует дополнительных библиотек для парсинга. XML более терпим к мелким синтаксическим ошибкам, но его обработка сложнее, особенно если используются атрибуты.

YAML — это более современный формат, который ориентирован на читаемость человеком. Синтаксис очень лаконичный. Данные описываются с помощью отступов и символов : для разделения ключей и значений:

menu:
  id: file
  value: File
  popup:
    menuitem:
      - value: New
        onclick: CreateNewDoc()
      - value: Open
        onclick: OpenDoc()
      - value: Close
        onclick: CloseDoc()

Структура организована с помощью отступов. Массив menuitem представлен в виде списка, где каждый элемент начинается с -.

YAML считается более человекочитаемым, так как у него нет кавычек и фигурных скобок. Но если неправильно поставите отступ, всё может сломаться — прямо как в Python.

Такой формат поддерживается в Python, Go и других языках. А ещё он часто используется для конфигурационных файлов, например для настройки Kubernetes или Docker Compose, и для документации.

Области применения

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

Как работать с JSON

JSON можно создать вручную, как обычный объект, или же использовать встроенные методы JavaScript для его обработки. Дальше посмотрим подробнее, как это делается.

Создание и чтение JSON

JSON создаётся так же просто, как обычный объект в JavaScript. Допустим, нам нужен объект, который описывает пользователя. Сохраняем его в переменной:

const user = {
  firstname: "Михаил",
  lastname: "Максимов",
  city: "Москва",
  age: 37,
};

После этого данные можно использовать в коде, обращаясь к разным свойствам объекта:

console.log(user.firstname); // Михаил
console.log(user.city); // Москва

Мы работаем с этим объектом так же, как с любым другим объектом в JavaScript: обращаемся к полям, добавляем или удаляем данные.

Для работы с JSON в JavaScript есть две специальные команды:

Допустим, мы получаем от сервера такую строку:

const jsonString = '{"firstname": "Михаил", "lastname": "Максимов", "city": "Москва"}';

Чтобы превратить эту строку в объект, используем метод JSON.parse():

const user = JSON.parse(jsonString);
console.log(user.firstname); // Михаил
console.log(user.city); // Москва
console.log(typeof user); // проверяем, что получили объект

А если мы хотим отправить данные обратно на сервер, объект можно снова превратить в строку с помощью метода JSON.stringify():

const updatedUser = JSON.stringify(user);
console.log(updatedUser);
console.log(typeof updatedUser); // string

Примеры формата данных JSON

Когда мы заходим на сайт или в приложение, сервер часто отправляет информацию о профиле в формате JSON. Например:

{
  "id": 67890,
  "name": "Рик Санчез",
  "email": "rick.sanchez@example.com",
  "subscriptions": ["news", "events"],
  "lastLogin": "2025-01-24T18:30:00Z"
}

В этом объекте:

В JSON удобно работать с каталогами товаров — он упрощает передачу данных и экономит трафик из-за легковесности. А поскольку JSON поддерживает массивы и объекты внутри объектов, то это удобно для описания каталога, где нужно передать список товаров с их характеристиками:

{
  "category": "Смартфоны",
  "products": [
    {
      "name": "Smartphone X",
      "price": 699.99,
      "inStock": true,
      "features": ["128GB Storage", "OLED Display", "5G"]
    },
    {
      "name": "Smartphone Y",
      "price": 499.99,
      "inStock": false,
      "features": ["64GB Storage", "LCD Display", "4G"]
    }
  ]
}

JSON часто используется для хранения или передачи данных аналитики. Например:

{
  "event": "page_view",
  "timestamp": "2025-01-25T12:00:00Z",
  "user": {
    "id": 12345,
    "sessionId": "abcd1234"
  }
}

В этом объекте:

С помощью таких данных можно анализировать, кто, когда и что делал на вашем сайте или в приложении.

JSON5 и его особенности

JSON5 — это более продвинутая версия с чуть большей удобочитаемостью и дополнительными возможностями. Он расширяет синтаксис JSON и снимает некоторые ограничения, в частности позволяет использовать комментарии, одинарные кавычки, завершающие запятые, а также значения Infinity, -Infinity и NaN, которые недоступны в стандартном JSON.

Основная идея JSON5 — позволить разработчикам писать данные так, как они привыкли это делать в JavaScript.

В JSON5 ключи объектов могут быть не только в кавычках, но и без них, если это валидные идентификаторы. Это избавляет от лишних символов:

// JSON
{ "firstname": "Михаил", "lastname": "Максимов" }
// JSON5
{ firstname: "Михаил", lastname: "Максимов" }

Кроме того, JSON5 позволяет оставлять завершающие запятые:

{ firstname: "Михаил", lastname: "Максимов", }

В массиве тоже можно оставить запятую после последнего элемента. Удобно, если часто редактируете данные:

// JSON5
[1, 2, 3,]


JSON5 улучшает работу с числами: можно писать числа в шестнадцатеричном формате:

0xFF // 255

А ещё позволяет использовать Infinity, -Infinity и NaN, которых нет в стандартном JSON.

Также JSON5 позволяет использовать дополнительные пробелы и отступы, чтобы структурировать данные. Это делает его ещё более удобным для чтения.

Для работы с JSON5 его стандарты нужно установить пакет через NPM:

npm install json5

👉 JSON5 особенно полезен на этапе разработки, но в продакшене лучше использовать классический JSON, чтобы избежать проблем с совместимостью.

JSON Schema и его применение

Если обычный JSON — это просто структура данных, то JSON Schema — это описание правил для данных: что допустимо, что обязательно и какие ограничения нужно соблюдать.

Когда мы работаем с JSON в API, очень важно, чтобы сервер и клиент «говорили на одном языке». Без строгих правил возможны ошибки: сервер ожидает одно, а клиент отправляет другое, или в запросах теряются обязательные поля, а данные приходят с неправильными типами (например, возраст как строка вместо числа).

Тогда разработчики добавляют JSON Schema — спецификацию, позволяющую описать структуру, типы и ограничения данных в JSON-документах. Там они задают, какие поля обязательны, какие типы данных допустимы и так далее.

Простая JSON Schema для описания пользователя может выглядеть так:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "integer",
      "minimum": 18
    },
    "email": {
      "type": "string",
      "format": "email"
    }
  },
  "required": ["name", "age", "email"]
}

Здесь мы расписали типы данных для каждого поля и указали, какие свойства обязательны.

Такая схема может использоваться сразу в нескольких сценариях.

Для валидации данных есть библиотеки для разных языков, например ajv для JavaScript или jsonschema для Python.

Безопасность работы с JSON

Работать с JSON просто и удобно, но если забыть про безопасность, то можно столкнуться с проблемами. Неправильная обработка данных, которые передаются в JSON, может открыть возможности для SQL-инъекций, XSS-атак и других уязвимостей.

Проблемы безопасности

JSON Injection — это ситуация, когда злоумышленник вставляет вредоносные данные в JSON, которые обрабатываются без проверки. Например:

const userInput = `", "isAdmin": true }`;
const jsonData = JSON.parse(`{"name": "${userInput}"}`);
console.log(jsonData); 
// { name: '', isAdmin: true }

Здесь пользовательский ввод напрямую попал в JSON: злоумышленник добавил в него isAdmin: true. Если приложение проверяет права доступа через эти данные, злоумышленник может получить привилегии администратора.

Если JSON-данные рендерятся на странице без проверки, это открывает возможности для XSS:

const jsonData = { content: '<script>alert("XSS!")</script>' };
document.getElementById('output').innerHTML = jsonData.content;

Такой код выполнит вредоносный скрипт. Злоумышленник может украсть куки или выполнить другие действия от имени пользователя.

Также через JSON можно сделать SQL-инъекции. JSON сам по себе безопасен, но если данные из него не проверяются и напрямую попадают в SQL-запросы, это открывает возможность для SQL-инъекций. Злоумышленник использует JSON как способ доставки вредоносного кода в систему.

Например:

const userData = JSON.parse(userInput);
const query = `SELECT * FROM users WHERE name = '${userData.name}' AND password = '${userData.password}'`;

Здесь userInput — это строка JSON, которую отправил клиент. Сначала она преобразуется в объект с помощью JSON.parse(). Затем значения userData.name и userData.password напрямую вставляются в строку SQL-запроса.

Если злоумышленник введёт userData.name = "' OR '1'='1", запрос превратится в:

SELECT * FROM users WHERE name = '' OR '1'='1' AND password = '${userData.password}';

Это позволяет обойти проверку, потому что условие OR '1'='1' всегда истинно. SQL-инъекция делает запрос некорректным с точки зрения логики безопасности, и в результате возвращаются все записи из таблицы users.

Рекомендации по безопасности

Чтобы защититься от атак, есть несколько простых правил.

Делать санитизацию данных — то есть удалять или экранировать потенциально вредоносные символы. Например, для HTML-данных можно использовать библиотеку DOMPurify:

const clean = DOMPurify.sanitize(dirtyInput);

Если мы выводим JSON-данные в HTML, их также нужно экранировать через свойство textContent:

element.textContent = jsonData.content;

Проверять структуру и типы данных. Для этого как раз подойдёт JSON Schema — она позволяет задавать чёткие правила для данных: какие поля обязательны, какие значения допустимы и их типы. Например, мы можем прописать, чтобы поле age было числом не меньше 18, а email — валидным адресом:

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 18 },
    "email": { "type": "string", "format": "email" }
  },
  "required": ["name", "age", "email"]
}

Затем для проверки данных можно использовать библиотеку Ajv, и если структура или значения данных не соответствуют схеме, валидатор покажет ошибку. Это полезно для API, чтобы заранее отсеивать некорректные запросы и снижать риск атак.

Использовать подготовленные запросы. Когда приложение получает данные в формате JSON, часто нужно сохранить их в базу данных. Если вставлять данные прямо в SQL-запросы без дополнительной обработки, это открывает возможность для SQL-инъекций.

Подготовленные запросы автоматически экранируют данные, предотвращая такие атаки. Чтобы не подставлять данные вручную, используют параметры:

const data = JSON.parse(userInput);
const query = `SELECT * FROM users WHERE username = ? AND password = ?`;
// Передаём значения через параметры
db.execute(query, [data.username, data.password]);

В этом случае база данных обработает параметры как обычные значения, а не как часть SQL-кода, и запрос будет безопасным.

Как открыть JSON на компьютере

JSON-файл — это обычный текстовый файл, так что подойдёт любой редактор. Самый быстрый способ — дважды кликнуть по файлу, и система сама предложит открыть его в блокноте. Но чтобы читать его было удобнее, лучше открывать в редакторе кода или браузере:

Если JSON содержит слишком много данных, можно подключить файл в свой проект и обработать через JavaScript или Python. Так удобнее анализировать содержимое.

Создание файла формата JSON

Чтобы создать свой JSON-файл, открываем любой текстовый редактор, пишем данные в формате JSON — пары «ключ-значение» и добавляем фигурные скобки:

{
  "name": "Татьяна",
  "age": 25,
  "isStudent": true
}

Сохраняем файл с расширением .json, например data.json. Теперь этот JSON-файл можно использовать в проекте. А чтобы сэкономить время, можно сразу скопировать структуру из онлайн-генератора JSON, а потом доработать под свои нужды.