Форматирование JSON из объекта в JavaScript: без либ

Быстрый ответ

Для того чтобы отформатировать JSON, вы можете воспользоваться функцией JSON.stringify с параметрами null и 2:

const obj = { title: 'Пример', active: true };
const форматированныйJSON = JSON.stringify(obj, null, 2);
console.log(форматированныйJSON);

В результате на экране вы увидите аккуратно отформатированный JSON:

{
  "title": "Пример",
  "active": true
}

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

Подробный обзор

Функция JSON.stringify, кроме того что делает код более читаемым, способствует его совместимости с различными платформами.

Совместимость со старыми браузерами

В случае если ваши пользователи пользуются устаревшими браузерами, которые не поддерживают JSON.stringify, подключите библиотеку json2.js:

<script src="path/to/json2.js"></script>

Эта библиотека поможет вам в случае недостатка поддержки JSON.stringify:

if (!window.JSON) {
   // Запускаем машину времени и подгружаем json2.js
}

Подробнее об этом расскажет наш спикер на видео

Селективный JSON

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

const user = { name: 'Алиса', age: 30, password: 'секретныйПароль' };
const выбранныйJSON = JSON.stringify(user, ['name', 'age'], 2);
console.log(выбранныйJSON);

Вы получите следующий результат:

{
  "name": "Алиса",
  "age": 30
}

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

Обработка специфических случаев

Функция JSON.stringify может игнорировать значения, такие как функции, undefined или циклические ссылки. Вы можете использовать функцию-фильтр, чтобы обрабатывать эти особенности:

function replacer(key, value) {
  if (typeof value === 'function') {
    return value.toString(); // Превращаем функцию в строку
  }
  if (value === undefined) {
    return 'null'; // Любая неизвестная переменная становится null
  }
  return value;
}

Отображение JSON на веб-странице

Для корректного отображения форматированного JSON на веб-странице удобно использовать тег <pre>, который сохранит форматирование:

<pre id="json-output"></pre>

document.getElementById('json-output').textContent = форматированныйJSON;

Теперь JSON будет корректно отображаться в любом браузере!

Визуализация

Теперь давайте визуально продемонстрируем, как JSON.stringify преобразует объект в красиво отформатированный JSON:

const object = { name: "Алиса", age: 30, city: "Страна чудес" };

JSON.stringify(object, null, 2);

/*
  🌟Преобразование с помощью stringify:🌟
  – Первый параметр – объект, который хотим преобразовать
  – Второй параметр – null, указывает на отсутствие фильтрации
  – Третий параметр – 2, задает размер отступа для удобства чтения
*/

{
  "name": "Алиса",
  "age": 30,
  "city": "Страна чудес"
}
// 🎉Итак, ваш JSON стал аккуратно отформатированным и легко читаемым! 🏠

Специальные советы и рекомендации

Подробнее об обработке null и undefined

Функция-фильтр позволяет преобразовать undefined в объектах в 'null'. В массивах undefined по умолчанию становится null:

JSON.stringify([1, undefined, 3]);  // Пример преобразования

В результате будет следующий вывод:

[1, null, 3] // Результат преобразования

Выбор отступов

С помощью JSON.stringify можно использовать любой размер отступа от 0 до 10:

const jsonString = JSON.stringify(object, null, 4); // Откройте просторы многомерности!

Работа с объёмными объектами

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

Для разработчиков Node.js

В Node.js имеется функция util.inspect(), которая предназначена для более детального преобразования объектов в строки.

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

1. MDN о JSON.stringify() — основы функции JSON.stringify.
2. Stack Overflow о красивом отображении JSON — обменивайтесь опытом форматирования JSON.
3. Документация Node.js о util.inspect() — детали об функции inspect в Node.js.
4. Prettier на GitHub — инструмент для форматирования кода, включая JSON.
5. json-formatter-js на npm — помощь в отображении JSON в браузере.
6. Методы примитивов на JavaScript.info — тонкости преобразования объектов с помощью JSON.stringify.
7. JSON Lint для проверки и форматирования JSON — работа с JSON онлайн.