JSON

JSON (от англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на простых структурах: объектах, массивах, строках, числах, логических значениях и null. JSON широко используется в веб-разработке, API, конфигурационных файлах, мобильных приложениях, серверных сервисах и базах данных.

Формат появился из синтаксиса объектов JavaScript, но не является частью только одного языка. JSON поддерживается большинством современных языков программирования и описан отдельными стандартами.^[1]^[2]

Где используется JSON

JSON стал одним из основных форматов передачи данных между клиентом и сервером. В веб-приложениях JavaScript получает JSON-ответ от API, преобразует его в объект и использует для отображения интерфейса.

Типичные области применения JSON:

ответы REST API и AJAX-запросов;
передача данных между фронтендом и бэкендом;
конфигурационные файлы проектов;
хранение структурированных данных;
обмен данными между микросервисами;
импорт и экспорт настроек;
работа с NoSQL-базами и JSON-полями в реляционных СУБД.

Главное преимущество JSON — простота. Его легко читать человеку, легко генерировать программно и удобно передавать по сети.

Синтаксис JSON

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

{
  "title": "AJAX в JavaScript",
  "category": "JavaScript",
  "published": true,
  "views": 1250,
  "tags": ["web", "api", "json"]
}

JSON поддерживает следующие типы значений:^[3]

объект;
массив;
строка;
число;
true и false;
null.

В JSON нельзя использовать функции, комментарии, одинарные кавычки, неопределённое значение undefined, даты как отдельный тип, trailing comma после последнего элемента и произвольные выражения JavaScript.

Объекты и массивы

Объект JSON хранит пары «ключ — значение». Такой формат удобен для описания сущности: статьи, пользователя, товара, настройки или записи из базы данных.

{
  "id": 42,
  "name": "WikiJournal",
  "language": "ru",
  "active": true
}

Массив JSON хранит упорядоченный список значений. В массиве могут быть строки, числа, объекты, другие массивы и допустимые JSON-значения.

[
  { "title": "HTML", "section": "Веб-разработка" },
  { "title": "CSS", "section": "Вёрстка" },
  { "title": "JavaScript", "section": "Программирование" }
]

В API массивы часто используются для передачи списков статей, комментариев, товаров, уведомлений или результатов поиска.

JSON и объект JavaScript

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

Пример объекта JavaScript:

const article = {
  title: 'JSON',
  category: 'JavaScript',
  published: true
};

Похожая запись в JSON:

{
  "title": "JSON",
  "category": "JavaScript",
  "published": true
}

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

JSON.parse()

Метод JSON.parse() преобразует JSON-строку в объект или массив JavaScript.^[4]

const jsonText = '{"title":"JSON","category":"JavaScript"}';
const article = JSON.parse(jsonText);

console.log(article.title); // JSON

Если строка содержит синтаксическую ошибку, JSON.parse() выбросит исключение. Поэтому данные, полученные извне, лучше разбирать внутри блока try...catch.

try {
  const data = JSON.parse(jsonText);
  console.log(data);
} catch (error) {
  console.error('Некорректный JSON:', error.message);
}

JSON.stringify()

Метод JSON.stringify() преобразует значение JavaScript в JSON-строку. Это нужно при отправке данных на сервер, сохранении настроек или подготовке данных для передачи между системами.

const user = {
  name: 'Анна',
  role: 'editor',
  active: true
};

const jsonText = JSON.stringify(user);
console.log(jsonText);

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

const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);

Такой вариант удобен для отладки, документации и конфигурационных файлов.

Практический пример

Ниже показан пример работы с JSON в браузере. Код берёт JSON-строку, преобразует её в массив объектов и выводит карточки статей на страницу.

Работа с JSON в JavaScript

HTML

<section class="json-demo">
  <h1>Статьи Викижурнала</h1>
  <p>Данные ниже загружаются из JSON-строки и превращаются в элементы страницы.</p>
  <button id="render-button" type="button">Показать статьи</button>
  <div id="output" class="cards"></div>
</section>

CSS

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #f5f7fb;
  color: #1f2937;
}

.json-demo {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
}

.json-demo h1 {
  margin: 0 0 12px;
  font-size: 28px;
}

button {
  margin: 8px 0 18px;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.card {
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.card strong {
  display: block;
  margin-bottom: 6px;
  color: #1d4ed8;
}

JavaScript

const jsonText = `[
  { "title": "HTML", "section": "Вёрстка", "articles": 24 },
  { "title": "CSS", "section": "Оформление", "articles": 49 },
  { "title": "JavaScript", "section": "Интерактивность", "articles": 16 }
]`;

const button = document.getElementById('render-button');
const output = document.getElementById('output');

button.addEventListener('click', () => {
  try {
    const topics = JSON.parse(jsonText);

    output.innerHTML = topics.map(topic => `
      <article class="card">
        <strong>${topic.title}</strong>
        <span>${topic.section}</span><br>
        <small>${topic.articles} материалов</small>
      </article>
    `).join('');
  } catch (error) {
    output.textContent = 'Не удалось разобрать JSON: ' + error.message;
  }
});

Результат

JSON в AJAX и API

JSON часто используется вместе с fetch(). Сервер возвращает JSON-ответ, браузер преобразует его методом response.json(), а JavaScript обновляет страницу.

async function loadArticles() {
  const response = await fetch('/api/articles');

  if (!response.ok) {
    throw new Error('Ошибка HTTP: ' + response.status);
  }

  const articles = await response.json();
  return articles;
}

При отправке JSON на сервер обычно указывают заголовок Content-Type: application/json и передают тело запроса через JSON.stringify().

await fetch('/api/articles', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'Новая статья' })
});

Частые ошибки

Одинарные кавычки: В JSON строки и ключи должны быть в двойных кавычках. Запись {'title':'JSON'} не является корректным JSON.

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

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

Undefined и функции: Значение undefined и функции не являются допустимыми JSON-значениями.

Неправильная кодировка: JSON обычно передают в Unicode. В веб-приложениях важно следить за корректной кодировкой ответа сервера и заголовками HTTP.

Безопасность

JSON сам по себе является форматом данных, но ошибки обработки JSON могут привести к проблемам безопасности. Нельзя слепо доверять данным, полученным от пользователя или внешнего API. Сервер должен проверять структуру, типы и допустимые значения.

На клиенте не стоит вставлять непроверенные данные как HTML через innerHTML, если они приходят из недоверенного источника. Для вывода обычного текста безопаснее использовать textContent или заранее очищать данные.

JSON, XML и YAML

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

В веб-API JSON стал распространённым выбором благодаря компактности, простому синтаксису и прямой поддержке в JavaScript.

См. также

Источники

↑ Introducing JSON // JSON.org.
↑ ECMA-404: The JSON Data Interchange Syntax // Ecma International.
↑ RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format // IETF.
↑ JSON // MDN Web Docs.

[json-org-1] Introducing JSON // JSON.org.

[ecma404-2] ECMA-404: The JSON Data Interchange Syntax // Ecma International.

[rfc8259-3] RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format // IETF.

[mdn-json-4] JSON // MDN Web Docs.

[1]

[2]

[3]

[4]