Если вы когда-нибудь работали с API, конфигами или передачей данных между сервером и браузером, вы наверняка слышали про JSON. Но что это такое на самом деле? Почему он стал настолько популярным? И как его готовить, чтобы не сломать проект? Давайте разбираться без занудства.

Digital-студия WNDER

Что такое JSON и с чем его едят

JSON (JavaScript Object Notation) — это текстовый формат обмена данными. Он выглядит как обычный объект в JavaScript, но на самом деле это просто строка. Представьте, что вы пишете записку другу: «Купи хлеб, молоко и масло». Только в случае с JSON вы пишете: {"купить": ["хлеб", "молоко", "масло"]}. Компьютеры понимают такую записку одинаково хорошо на любом языке программирования.

JSON удобен тем, что он:

  • Легко читается человеком (почти как обычный текст).
  • Легко парсится машиной (быстро преобразуется в объекты).
  • Не зависит от языка программирования (поддерживается везде).

Изначально он был частью JavaScript, но сейчас это независимый стандарт. Его используют в REST API, в конфигурационных файлах, в базах данных (например, PostgreSQL поддерживает тип JSONB), и даже в CSS (нет, шутка, но мог бы).

Синтаксис JSON: правила, которые нельзя нарушать

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

  • Данные хранятся в парах «ключ: значение».
  • Ключи всегда в двойных кавычках.
  • Значения могут быть: строкой (в двойных кавычках), числом, логическим true/false, null, массивом или другим объектом.
  • Элементы разделяются запятыми, но после последнего элемента запятая не ставится.
  • Комментарии в JSON запрещены.

Пример простого JSON:

{
  "name": "Иван",
  "age": 30,
  "isProgrammer": true,
  "skills": ["PHP", "JavaScript"],
  "address": {
    "city": "Москва",
    "zip": "101000"
  },
  "wife": null
}

Обратите внимание: строки только в двойных кавычках, числа без кавычек, логические значения без кавычек, null без кавычек. Массив в квадратных скобках, объект в фигурных.

Правило: Если вы пишете JSON вручную, всегда проверяйте его валидатором. Одна лишняя запятая может сломать весь запрос.

JSON в PHP: кодируем и декодируем

В PHP есть две основные функции для работы с JSON: json_encode() и json_decode(). Первая превращает массив или объект PHP в JSON-строку, вторая — наоборот.

Пример:

 'Иван',
    'age' => 30,
    'skills' => ['PHP', 'JavaScript']
];

// Преобразуем в JSON
$json = json_encode($data, JSON_UNESCAPED_UNICODE);
echo $json;
// Выведет: {"name":"Иван","age":30,"skills":["PHP","JavaScript"]}

// Обратно в массив
$decoded = json_decode($json, true);
print_r($decoded);
?>

Флаг JSON_UNESCAPED_UNICODE нужен, чтобы русские буквы не превращались в \u0438\u0432\u0430\u043d. Без него JSON будет нечитаемым для человека.

Если json_decode() получает некорректную строку, она вернёт null. Поэтому всегда проверяйте результат и используйте json_last_error() для диагностики.

JSON в JavaScript: работа с данными на клиенте

В JavaScript JSON встроен нативно. Есть два метода: JSON.stringify() и JSON.parse().

// Объект JavaScript
const user = {
  name: 'Иван',
  age: 30,
  skills: ['PHP', 'JavaScript']
};

// Преобразуем в JSON-строку
const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"Иван","age":30,"skills":["PHP","JavaScript"]}

// Парсим обратно в объект
const parsedUser = JSON.parse(jsonString);
console.log(parsedUser.name); // Иван

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

Лайфхак: Если вам нужно скопировать объект JavaScript, используйте JSON.parse(JSON.stringify(obj)). Это создаст глубокую копию, но работает только для простых данных (без функций, дат и undefined).

Где ещё используется JSON: от конфигов до баз данных

JSON проник везде. Вот несколько примеров:

Область Пример использования
Веб-API Ответы от REST API (например, GitHub API)
Конфигурации package.json, tsconfig.json, composer.json
Базы данных PostgreSQL JSONB, MongoDB документы
Логи Структурированные логи в ELK Stack

Даже в HTML можно встроить JSON через <script type="application/json"> и потом прочитать его из JavaScript. Удобно для передачи начальных данных на страницу.

<script id="user-data" type="application/json">
{
  "name": "Иван",
  "age": 30
}
</script>

<script>
  const userData = JSON.parse(document.getElementById('user-data').textContent);
  console.log(userData.name); // Иван
</script>

Частые ошибки и как их избежать

Даже опытные разработчики иногда спотыкаются на JSON. Вот топ-5 ошибок:

  • Одинарные кавычки. В JSON только двойные. {'name': 'Иван'} — невалидно.
  • Висячие запятые. {"name": "Иван",} — ошибка. Лишняя запятая после последнего элемента недопустима.
  • Комментарии. // комментарий или /* */ вызовут ошибку парсинга.
  • Неэкранированные спецсимволы. Если в строке есть кавычка, её нужно экранировать: \".
  • Кодировка. JSON должен быть в UTF-8. Иначе русские буквы превратятся в кракозябры.

Чтобы избежать проблем, используйте онлайн-валидаторы (например, jsonlint.com) или встроенные инструменты в IDE. Они подсветят ошибки.

Совет: Если вы генерируете JSON на сервере, всегда устанавливайте заголовок Content-Type: application/json. Это поможет клиенту правильно обработать ответ.

JSON vs XML: почему JSON победил

Когда-то XML был королём обмена данными. Но JSON оказался проще и легче. Сравните:

Критерий JSON XML
Читаемость Высокая Средняя
Размер Компактный Громоздкий
Парсинг в JS Встроенный Требует DOM-парсер
Поддержка типов Числа, строки, булевы, null, массивы, объекты Только текст (все остальное через схемы)

XML до сих пор используется в некоторых enterprise-системах (SOAP, RSS), но для новых проектов JSON — стандарт де-факто.

Что в итоге

JSON — это простой, но мощный формат обмена данными. Он лёгкий, читаемый и поддерживается всеми языками. Главное — помнить о строгих правилах синтаксиса: двойные кавычки, никаких комментариев, правильные запятые. В PHP используйте json_encode() и json_decode(), в JavaScript — JSON.stringify() и JSON.parse(). И не забывайте про валидацию.

Если вы только начинаете, попробуйте создать простой JSON-файл и распарсить его в консоли браузера. Это лучший способ закрепить материал. Удачи в кодинге!

Студия WNDER