Как красиво вывести JSON в читаемом виде с отступами в JavaScript?

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

В JavaScript для красивого вывода JSON (pretty-print) используется встроенный метод JSON.stringify(), который принимает три параметра:

JSON.stringify(value, replacer, space)

Третий параметр space отвечает за форматирование. Он может быть:

• Числом — количество пробелов для отступа (максимум 10)
• Строкой — строка, которая будет использоваться для отступа (например, табуляция "\t")

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

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

// Красивый вывод с отступами в 2 пробела
const prettyJSON = JSON.stringify(user, null, 2);
console.log(prettyJSON);

Результат:

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

Пример с табуляцией

// Используем символ табуляции для отступов
const prettyJSON = JSON.stringify(user, null, "\t");
console.log(prettyJSON);

Результат (с табуляцией):

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

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

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

<!DOCTYPE html>
<html>
<body>
  <pre id="jsonDisplay"></pre>

  <script>
    const user = {
      name: "Иван",
      age: 30,
      address: { city: "Москва", street: "Ленина", house: 10 },
      hobbies: ["программирование", "чтение", "спорт"]
    };

    const prettyJSON = JSON.stringify(user, null, 2);
    document.getElementById("jsonDisplay").textContent = prettyJSON;
  </script>
</body>
</html>

Подсветка синтаксиса (дополнительно)

Если хотите раскрасить ключи и значения, можно написать простую функцию:

function syntaxHighlight(json) {
  json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
  return json.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
    function (match) {
      let cls = 'number';
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key';
        } else {
          cls = 'string';
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
    }
  );
}

// Использование
const prettyJSON = JSON.stringify(user, null, 2);
document.getElementById("jsonDisplay").innerHTML = syntaxHighlight(prettyJSON);

Добавьте CSS для подсветки:

<style>
  .key { color: #d73a49; }
  .string { color: #032f62; }
  .number { color: #005cc5; }
  .boolean { color: #22863a; }
  .null { color: #6a737d; }
</style>

Работа с JSON-строкой

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

const jsonString = '{"name":"Иван","age":30}';
const obj = JSON.parse(jsonString);
const prettyJSON = JSON.stringify(obj, null, 2);
console.log(prettyJSON);

Этот подход работает во всех современных браузерах и Node.js. Параметр space — самый простой и эффективный способ сделать JSON читаемым.

function prettyPrint(obj, indent = 0) {
  const spaces = '  '.repeat(indent);
  if (obj === null) return 'null';
  if (Array.isArray(obj)) {
    const items = obj.map(item => 
      `${spaces}  ${prettyPrint(item, indent + 1)}`
    ).join(',\n');
    return `[\n${items}\n${spaces}]`;
  }
  if (typeof obj === 'object') {
    const keys = Object.keys(obj);
    const items = keys.map(key => 
      `${spaces}  "${key}": ${prettyPrint(obj[key], indent + 1)}`
    ).join(',\n');
    return `{\n${items}\n${spaces}}`;
  }
  if (typeof obj === 'string') return `"${obj}"`;
  return String(obj);
}