Вывод JSON.stringify в div в отформатированном виде

Существует распространенная задача, которую часто ставят перед собой новички при изучении HTML и JavaScript: вывод отформатированного JSON в элемент div. Как правило, они используют функцию JSON.stringify, чтобы преобразовать объект JSON в строку, и затем пытаются вставить эту строку в div.

Пример кода может выглядеть так:

let my_json = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

let result = JSON.stringify(my_json, null, 2);
document.getElementById('myDiv').innerHTML = result;

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

Это происходит потому, что HTML не интерпретирует символы перевода строки и пробелы так, как это делает JavaScript. В HTML для форматирования текста используются специальные теги, например <br> для переноса строки и   для пробела.

Решение

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

let my_json = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

let result = JSON.stringify(my_json, null, 2);
document.getElementById('myDiv').innerHTML = `<pre>${result}</pre>`;

Теперь JSON будет отображаться в элементе div с сохранением отступов и переносов строк, что значительно упрощает его чтение.