JSON и JS: полный синтаксис и примеры

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

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

1. Объекты: неупорядоченный набор пар ключ: значение. Всегда заключаются в фигурные скобки {}.
2. Массивы: упорядоченный список значений. Всегда заключаются в квадратные скобки [].
3. Строки: последовательность символов в двойных кавычках. Использование одинарных кавычек в JSON недопустимо!
4. Числа: целые или дробные числа (например, 256, 99.95).
5. Логические значения: true или false.
6. Null: специальное значение null, означающее «ничего».

Ключевое отличие JSON от обычного JavaScript-объекта — ключи (имена свойств) всегда должны быть заключены в двойные кавычки. Рассмотрим пример корректной JSON-структуры, описывающей заказ в кофейне:

{
  "orderId": 10492,
  "customer": "Иван Петров",
  "prepaid": true,
  "discountPercent": null,
  "items": [
    {
      "title": "Капучино",
      "volumeMl": 300,
      "quantity": 2,
      "additives": ["корица", "ваниль"]
    },
    {
      "title": "Круассан",
      "quantity": 1,
      "withGlaze": false
    }
  ]
}

В этом примере мы видим объект заказа, внутри которого находится массив items. Каждый элемент массива — это отдельный объект товара. Обратите внимание: строки только в двойных кавычках, логическое значение true записано без кавычек, а null также является самостоятельным значением.

1. Функции и методы: JSON хранит данные, а не логику.
2. Даты в виде объектов Date: даты обычно передаются строками в формате ISO (например, «2024-05-20T15:30:00.000Z») или миллисекундами.
3. Комментарии: в JSON нельзя писать комментарии, в отличие от кода JavaScript.
4. Ссылки: структура описывает только конкретные значения, а не ссылки на них.

Ключевая магия взаимодействия JSON и JS заключается в возможности быстрой конвертации. Преобразование между JSON и объектами JavaScript осуществляется с помощью встроенного объекта JSON, который предоставляет два основных метода: parse() и stringify(). Это основа основ при создании динамичных веб-интерфейсов.

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

Рассмотрим оба процесса детально с уникальными примерами.

Метод JSON.parse(): из строки в объект

Метод JSON.parse() принимает строку в формате JSON и возвращает соответствующий JavaScript-объект. Если строка составлена с ошибками (например, ключ без кавычек), метод выбросит исключение (ошибку), поэтому в реальных проектах его часто оборачивают в конструкцию try...catch.

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

// Сырые данные, полученные от сервера (например, через fetch)
const serverResponseText = '{"storageSection":"А-12","lastUpdated":"2024-05-20","categories":[{"type":"хрупкий","totalUnits":45},{"type":"крупногабаритный","totalUnits":12}],"metadata":{"source":"iot_scale_01"}}';

// Преобразуем строку в рабочий объект
let storageData;
try {
  storageData = JSON.parse(serverResponseText);
  console.log('Парсинг прошел успешно:', storageData);
} catch (parseError) {
  console.error('Не удалось обработать ответ сервера:', parseError.message);
}

// Теперь мы можем обращаться к свойствам, как у обычного объекта
if (storageData) {
  // Выводим название первой категории
  console.log('Первая категория товаров:', storageData.categories[0].type); // Выведет: "хрупкий"
  // Проверяем количество крупногабаритных товаров
  console.log('Крупногабаритных единиц:', storageData.categories[1].totalUnits); // Выведет: 12
}

Как видите, после JSON.parse() строка превратилась в иерархическую структуру, по которой можно перемещаться с помощью точек или скобок.

Метод JSON.stringify(): из объекта в строку

Обратная операция выполняется методом JSON.stringify(). Он принимает JavaScript-объект (или массив) и возвращает его строковое представление в формате JSON. Это необходимо для отправки данных через AJAX-запросы или для сохранения сложных структур в localStorage.

Представим, что мы формируем настройки виджета на сайте и хотим сохранить их в текстовом виде.

// Создаем сложный объект с настройками пользовательского дашборда
const userDashboardSettings = {
  version: 2,
  layout: 'two_columns',
  widgets: [
    { id: 'weather', isActive: true, refreshInterval: 300 },
    { id: 'stock_ticker', isActive: false, symbols: ['AAPL', 'GOOG'] }
  ],
  colors: {
    header: '#2c3e50',
    background: '#ecf0f1',
    font: '#2c3e50'
  }
};

// Преобразуем настройки в компактную JSON-строку для отправки на сервер
const stringifiedSettings = JSON.stringify(userDashboardSettings);
console.log(stringifiedSettings);
/* Вывод (в одну строку):
{"version":2,"layout":"two_columns","widgets":[{"id":"weather","isActive":true,"refreshInterval":300},{"id":"stock_ticker","isActive":false,"symbols":["AAPL","GOOG"]}],"colors":{"header":"#2c3e50","background":"#ecf0f1","font":"#2c3e50"}}
*/

// Иногда нужно получить "красивый" (отформатированный) JSON для чтения
const prettyStringified = JSON.stringify(userDashboardSettings, null, 2);
console.log(prettyStringified); // Вывод будет с отступами в 2 пробела

Третий аргумент 2 в JSON.stringify() отвечает за форматирование — добавляет пробелы для улучшения читаемости. Первый аргумент — сам объект, второй — функция замены (часто используется null, если не нужна).

Стандартная операция присваивания let newObject = oldObject не создает новый объект, а лишь копирует ссылку на существующий. Для простых («плоских») объектов можно использовать циклы или Object.assign(), но для объектов с глубиной вложения более одного уровня (объекты внутри объектов) этого недостаточно.

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

// Исходный объект, который нельзя изменять напрямую
const originalAssetData = {
  assetName: 'Ноутбук Dell',
  specifications: {
    processor: 'Intel i7',
    ram: '32 ГБ',
    ports: ['USB-C', 'HDMI', 'Ethernet']
  },
  isRented: true
};

// Попытка простого копирования (неправильно для глубоких объектов)
const naiveCopy = originalAssetData;
naiveCopy.specifications.ram = '16 ГБ'; // Это изменение затронет и originalAssetData!

console.log(originalAssetData.specifications.ram); // Выведет: '16 ГБ' (неожиданно!)

// Правильное глубокое клонирование через JSON
const deepCloneAsset = JSON.parse(JSON.stringify(originalAssetData));

// Теперь меняем копию
deepCloneAsset.specifications.ram = '64 ГБ';
deepCloneAsset.specifications.ports.push('Thunderbolt');

// Проверяем оригинал
console.log(originalAssetData.specifications.ram); // Выведет: '16 ГБ' (не изменилось!)
console.log(originalAssetData.specifications.ports); // Выведет: ['USB-C', 'HDMI', 'Ethernet'] (не изменилось!)
console.log(deepCloneAsset.specifications.ports); // Выведет: ['USB-C', 'HDMI', 'Ethernet', 'Thunderbolt']

Этот способ очень лаконичен и работает в 99% случаев. Однако у него есть ограничение: он работает только с сериализуемыми данными. Если в объекте есть методы (функции), символы (Symbol), undefined или циклические ссылки, этот метод вызовет ошибку или проигнорирует такие свойства.

Ни один код не застрахован от сбоев, особенно когда речь идет о данных, приходящих извне. Обработка ошибок при работе с JSON — обязательный этап написания надежного, отказоустойчивого приложения. Нельзя просто вызвать JSON.parse() и надеяться, что строка всегда будет корректной. Сервер может вернуть невалидный JSON из-за внутренней ошибки (500-я ошибка), или злоумышленник может попытаться отправить поврежденные данные.

Основной инструмент защиты — конструкция try...catch. Она позволяет перехватить исключение (ошибку), которое выбрасывает JSON.parse(), и обработать ситуацию без падения всего скрипта.

Рассмотрим пример получения данных от гипотетического API погоды, который иногда «глючит».

// Функция для безопасного получения температуры
function fetchTemperatureData(jsonString) {
  let weatherInfo = {
    city: 'Неизвестно',
    temperature: null,
    error: false
  };

  try {
    // Пытаемся распарсить входящую строку
    const parsedData = JSON.parse(jsonString);
    
    // Проверяем, что структура соответствует ожидаемой (валидация)
    if (parsedData && typeof parsedData === 'object' && parsedData.hasOwnProperty('celsius')) {
      weatherInfo.city = parsedData.location || 'Не указан';
      weatherInfo.temperature = parsedData.celsius;
    } else {
      // Если структура не та, которую мы ждем, считаем это ошибкой
      throw new Error('Полученные данные имеют неверный формат');
    }
    
  } catch (parseOrValidationError) {
    // Логируем ошибку и устанавливаем флаг
    console.warn('Ошибка обработки погодных данных:', parseOrValidationError.message);
    weatherInfo.error = true;
    weatherInfo.temperature = 'ошибка получения';
  }
  
  return weatherInfo;
}

// Тест с корректной строкой
const goodResponse = '{"location":"Москва","celsius":22,"humidity":55}';
console.log(fetchTemperatureData(goodResponse)); 
// {city: 'Москва', temperature: 22, error: false}

// Тест с битой строкой (например, пропущена кавычка)
const badResponse = '{"location":"СПб", "celsius":18,}'; // Лишняя запятая
console.log(fetchTemperatureData(badResponse));
// {city: 'Неизвестно', temperature: 'ошибка получения', error: true}

// Тест с неверной структурой (нет поля celsius)
const wrongStructure = '{"город":"Казань","град":30}';
console.log(fetchTemperatureData(wrongStructure));
// {city: 'Неизвестно', temperature: 'ошибка получения', error: true}

Важно не только ловить ошибки парсинга, но и проверять структуру полученных данных. Наличие try...catch гарантирует, что пользователь увидит сообщение об ошибке в интерфейсе, а не белую страницу или бесконечную загрузку.

fetch() возвращает Promise, что делает работу с ним асинхронной. Это означает, что код не останавливается в ожидании ответа от сервера, а продолжает выполняться, а когда данные приходят, срабатывает специальный обработчик.

Самый частый сценарий в работе веб-студии — получение списка записей (товаров, статей, пользователей) с сервера и отображение их на странице. Рассмотрим пример запроса к условному API для получения списка задач.

// Асинхронная функция для загрузки и отображения списка проектов
async function loadProjectList() {
  const loadingIndicator = document.getElementById('projects-loading');
  const listContainer = document.getElementById('projects-list');

  try {
    // 1. Показываем индикатор загрузки
    if (loadingIndicator) loadingIndicator.style.display = 'block';

    // 2. Отправляем GET-запрос к API
    const serverResponse = await fetch('https://api.example.com/projects?userId=45');

    // 3. Проверяем, успешен ли HTTP-статус (например, 200 OK)
    if (!serverResponse.ok) {
      throw new Error(`Сервер вернул ошибку: ${serverResponse.status}`);
    }

    // 4. Извлекаем JSON из тела ответа (это тоже асинхронная операция)
    const projectsArray = await serverResponse.json();
    
    // 5. Теперь работаем с массивом объектов
    if (projectsArray && Array.isArray(projectsArray)) {
      renderProjects(projectsArray, listContainer);
    } else {
      throw new Error('Ответ не является массивом');
    }

  } catch (networkOrDataError) {
    console.error('Не удалось загрузить проекты:', networkOrDataError.message);
    if (listContainer) {
      listContainer.innerHTML = '<p class="error-message">Не удалось загрузить список проектов. Попробуйте позже.</p>';
    }
  } finally {
    // 6. Убираем индикатор загрузки в любом случае
    if (loadingIndicator) loadingIndicator.style.display = 'none';
  }
}

// Функция отрисовки (очень простая)
function renderProjects(projects, container) {
  if (!container) return;
  
  if (projects.length === 0) {
    container.innerHTML = '<p>Проекты не найдены.</p>';
    return;
  }

  let htmlString = '<ul class="project-list">';
  for (let project of projects) {
    // Предполагаем, что у каждого проекта есть поля id, name, status
    htmlString += `<li key="${project.id}">${project.name} — статус: ${project.status || 'не указан'}</li>`;
  }
  htmlString += '</ul>';
  container.innerHTML = htmlString;
}

// Запускаем загрузку (например, при загрузке страницы)
window.addEventListener('DOMContentLoaded', loadProjectList);

Этот пример наглядно показывает цепочку: отправка запроса -> получение потока (Response) -> преобразование потока в JSON (response.json()) -> использование данных. await заставляет JavaScript ждать выполнения промиса, но не блокирует главный поток целиком, позволяя странице оставаться отзывчивой.

Подводя итог, можно уверенно сказать, что простота и эффективность обеспечили JSON место основного формата для API и конфигураций. Мы рассмотрели полный цикл жизни JSON в JavaScript: от строгих правил синтаксиса до безопасного парсинга и использования в асинхронных запросах. Понимание методов JSON.parse() и JSON.stringify() является базовым навыком, без которого сложно представить профессиональную разработку на JavaScript.

Освоив взаимодействие JSON и JavaScript, вы получаете ключ к созданию динамичных веб-проектов. Но теория без практики быстро забывается, а самостоятельное изучение тормозится из-за пробелов в фундаменте. Приглашаем вас на наш онлайн-курс «Обучение JavaScript с нуля до профи», где вы научитесь создавать сложные интерактивные сайты с нуля.

Если же нужен результат быстрее или уникальный сайт «под ключ», вы можете заказать создание сайта в нашей веб-студии — мы воплотим вашу идею в профессиональный продукт.