Красивый вывод JSON с помощью JavaScript

Ответ пользователя Pumbaa80 отличный, если у вас есть объект, который вы хотите красиво отформатировать. Однако, если вы начинаете с правильной JSON строки, которую тоже хотите красиво отформатировать, вам нужно сначала преобразовать её в объект:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString), null, 2);  

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

Я думаю, что вам нужно что-то вроде этого:

JSON.stringify(obj, null, '\t');

Этот код "красивым образом" форматирует вашу строку JSON, используя табуляцию для отступов.

Если вы предпочитаете использовать пробелы вместо табуляций, вы также можете указать число пробелов, которое хотите использовать:

JSON.stringify(obj, null, 2);

Чтобы отобразить объект JSON в HTML, вы можете использовать метод JSON.stringify(). Однако, если вы хотите сохранить форматирование и делать вывод более читабельным, вам стоит обернуть результат в теги <pre></pre>.

Вот пример кода, который демонстрирует это:

var jsonObj = {
    "streetLabel": "Avenue Anatole France",
    "city": "Paris 07",
    "postalCode": "75007",
    "countryCode": "FRA",
    "countryLabel": "France"
};

// Выводим объект без форматирования
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

// Выводим объект с форматированием в тегах <pre>
document.getElementById("result-after").innerHTML = "<pre>" + JSON.stringify(jsonObj, undefined, 2) + "</pre>";

В этом коде мы создаем объект jsonObj с адресными данными и выводим его дважды: сначала без форматирования, затем с использованием JSON.stringify(jsonObj, undefined, 2), что позволяет добавить отступы для более удобного чтения. Обернув его в <pre>, мы сохраняем пробелы и переносы строк в HTML.

Для корректной работы этого примера вам также понадобятся некоторые стили для контейнеров, чтобы вывод не наслаивался:

div { float:left; clear:both; margin: 1em 0; }

И сам HTML-код для отображения результатов:

<div id="result-before"></div>
<div id="result-after"></div>

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

Если вы используете ES5, просто вызовите JSON.stringify с следующими параметрами:

• 2-й аргумент: replacer; установите значение null,
• 3-й аргумент: space; используйте табуляцию.

Вот пример:

JSON.stringify(anObject, null, '\t');

Источник: MDN Web Docs