Как красиво вывести (pretty-print) JSON в JavaScript: читаемый формат с отступами

Используйте JSON.stringify() с параметрами для форматирования

Самый простой и мощный способ красиво вывести JSON в JavaScript — это использовать встроенный метод JSON.stringify() с дополнительными параметрами. По умолчанию он возвращает строку без пробелов, но мы можем добавить отступы с помощью третьего аргумента.

Базовый синтаксис

Метод принимает три параметра:

JSON.stringify(value, replacer, space)

• value — объект или значение, которое нужно преобразовать в JSON
• replacer — функция или массив для фильтрации свойств (можно передать null, если не нужен)
• space — количество пробелов для отступа или строка-разделитель

Пример с пробелами

Вот как вы можете красиво вывести ваш объект:

const data = {
  name: "Иван",
  age: 30,
  address: {
    city: "Москва",
    street: "Тверская",
    zip: 101000
  },
  hobbies: ["программирование", "чтение", "спорт"]
};

// Используем 2 пробела для отступа
const prettyJSON = JSON.stringify(data, null, 2);
console.log(prettyJSON);

Результат в консоли:

{
  "name": "Иван",
  "age": 30,
  "address": {
    "city": "Москва",
    "street": "Тверская",
    "zip": 101000
  },
  "hobbies": [
    "программирование",
    "чтение",
    "спорт"
  ]
}

Параметр space: разные варианты

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

// 4 пробела
console.log(JSON.stringify(data, null, 4));

// Строка-табуляция
console.log(JSON.stringify(data, null, '\t'));

// Любая строка (например, "---")
console.log(JSON.stringify(data, null, '  '));

Практический совет: создайте функцию-помощник

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

function prettyPrint(obj, indent = 2) {
  console.log(JSON.stringify(obj, null, indent));
}

// Использование
prettyPrint(data, 4);

Как отформатировать JSON-строку

Если у вас уже есть строка JSON (например, полученная из API), сначала преобразуйте её в объект, а потом обратно:

const jsonString = '{"name":"Иван","age":30,"address":{"city":"Москва"}}';
const obj = JSON.parse(jsonString);
const formatted = JSON.stringify(obj, null, 2);
console.log(formatted);

Важные замечания

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

Этот метод работает во всех современных браузерах и Node.js, не требует установки дополнительных библиотек и даёт полный контроль над форматированием.

const data = {
  name: "Иван",
  age: 30,
  address: { city: "Москва", street: "Тверская" },
  hobbies: ["программирование", "спорт"]
};

// Интерактивный просмотр
console.dir(data, { depth: null, colors: true });