Существует распространенная задача, которую часто ставят перед собой новички при изучении 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 с сохранением отступов и переносов строк, что значительно упрощает его чтение.
Добавить комментарий