5 способов красиво вывести JSON-данные в HTML-элемент div

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Веб-разработчики и программисты, работающие с JSON в своих проектах
Студенты и новички в области веб-разработки
Специалисты, создающие административные панели и инструменты для отладки данных
Работая с JSON в веб-приложениях, я часто сталкивался с ситуацией, когда нужно отобразить данные для отладки или создать удобную панель администратора. Увы, стандартный вывод JSON.stringify() превращает структурированные данные в нечитаемую кашу символов. Без форматирования вместо удобного инструмента получаем головную боль для глаз и мозга. Сегодня я поделюсь пятью проверенными способами красиво вывести JSON-данные в HTML-элемент div — от простых встроенных методов JavaScript до продвинутых библиотек с интерактивными возможностями. 🔍

Хотите уверенно работать с JSON и другими важными технологиями веб-разработки? Курс Обучение веб-разработке от Skypro — это ваш путь от новичка до профессионала. На практических проектах вы научитесь не только форматировать данные, но и создавать полноценные веб-приложения с нуля, работая с реальными API. Наши студенты уже через 9 месяцев находят работу в IT с достойной зарплатой!

Форматированный вывод JSON.stringify: основные подходы

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

Рассмотрим простой пример:

Скопировать код

const userData = {
name: "Алексей",
age: 28,
skills: ["JavaScript", "React", "Node.js"],
contacts: {
email: "alexey@example.com",
phone: "+7123456789"
}
};

// Стандартный вывод
document.getElementById("json-container").innerHTML = JSON.stringify(userData);

Результат будет выглядеть так:

json

Скопировать код

{"name":"Алексей","age":28,"skills":["JavaScript","React","Node.js"],"contacts":{"email":"alexey@example.com","phone":"+7123456789"}}

Согласитесь, не самый удобный формат для чтения. К счастью, у нас есть несколько подходов к решению этой проблемы:

Использование параметров JSON.stringify — метод принимает два дополнительных параметра для контроля вывода
Применение HTML-элементов для сохранения форматирования
CSS-стилизация для улучшения восприятия
Специализированные библиотеки для продвинутого форматирования
Интерактивные методы с возможностью сворачивания/разворачивания узлов

Давайте сравним основные подходы по сложности реализации и функциональности:

Метод	Сложность внедрения	Функциональность	Размер кода
JSON.stringify с параметрами	Низкая	Базовая	1 строка
pre + JSON.stringify	Низкая	Базовая	1-2 строки
CSS-стилизация	Средняя	Улучшенная читаемость	10-30 строк
Библиотеки (JSONViewer)	Средняя	Высокая	Подключение библиотеки + 5-10 строк
Интерактивное форматирование	Высокая	Расширенная	30+ строк или библиотека

Анна Михайлова, Frontend-разработчик
Однажды я работала над административной панелью для крупного интернет-магазина. Менеджерам требовалось видеть детальную информацию о заказах в реальном времени. Сначала я просто выводила данные через JSON.stringify, но менеджеры жаловались на нечитабельность. Это выглядело как стена текста, в которой невозможно было найти нужную информацию.
Я попробовала первый метод с параметрами отступов в stringify и обёрткой в pre. Разница была колоссальной! Время, которое тратили менеджеры на анализ данных, сократилось вдвое. А когда я добавила немного CSS для подсветки ключей и значений разными цветами, они буквально аплодировали. "Наконец-то я могу видеть всю информацию о клиенте, не напрягая глаза!" — сказала руководитель отдела продаж.

Метод pre + JSON.stringify с параметрами отступов

Самый простой и эффективный способ форматирования JSON — это использование встроенных возможностей метода JSON.stringify() в сочетании с HTML-элементом <pre>. Этот подход не требует подключения внешних библиотек и работает во всех современных браузерах. 🚀

JSON.stringify() принимает три параметра:

Объект для сериализации
Функция замены (replacer) или массив свойств (необязательно)
Количество пробелов для отступов (space)

Именно третий параметр превращает обычный JSON в красиво отформатированную структуру. Вот пример:

Скопировать код

const userData = {
name: "Алексей",
age: 28,
skills: ["JavaScript", "React", "Node.js"],
contacts: {
email: "alexey@example.com",
phone: "+7123456789"
}
};

// Форматированный вывод с отступами в 2 пробела
document.getElementById("json-container").innerHTML = 
`<pre>${JSON.stringify(userData, null, 2)}</pre>`;

Результат будет выглядеть так:

json

Скопировать код

{
"name": "Алексей",
"age": 28,
"skills": [
"JavaScript",
"React",
"Node.js"
],
"contacts": {
"email": "alexey@example.com",
"phone": "+7123456789"
}
}

Элемент <pre> сохраняет все пробелы и переносы строк, что делает JSON читабельным прямо в HTML. Вы можете варьировать третий параметр от 1 до 10, чтобы контролировать размер отступов.

Есть несколько вариаций этого метода:

Использование символов табуляции вместо пробелов: JSON.stringify(data, null, '\t')
Применение произвольных разделителей: JSON.stringify(data, null, '--')
Комбинирование с функцией replacer для фильтрации данных

Вот пример использования функции replacer для скрытия конфиденциальных данных:

Скопировать код

const replacer = (key, value) => {
// Скрываем email и телефон
if (key === 'email' || key === 'phone') {
return '***скрыто***';
}
return value;
};

document.getElementById("json-container").innerHTML = 
`<pre>${JSON.stringify(userData, replacer, 2)}</pre>`;

Этот метод обладает несколькими преимуществами:

Простота реализации — всего одна строка кода
Отсутствие зависимостей от внешних библиотек
Хорошая совместимость со всеми браузерами
Возможность тонкой настройки форматирования

Тем не менее, у этого подхода есть и ограничения. Вы не получите подсветку синтаксиса или интерактивные функции, такие как сворачивание/разворачивание узлов. Для более сложных случаев стоит рассмотреть следующие методы.

Библиотеки для красивого отображения JSON в div

Когда встроенных методов JavaScript недостаточно, на помощь приходят специализированные библиотеки для визуализации JSON. Они предлагают расширенную функциональность: подсветку синтаксиса, сворачивание/разворачивание узлов, поиск по данным и многое другое. 📚

Рассмотрим наиболее популярные библиотеки и их возможности:

Библиотека	Размер (минифиц.)	Интерактивность	Темы оформления	Сложность внедрения
JSON Formatter	~5 KB	Базовая	1	Низкая
JSONViewer	~8 KB	Средняя	3	Низкая
react-json-view	~45 KB	Высокая	6+	Средняя (требует React)
JSON Tree	~12 KB	Высокая	2	Низкая
jquery.json-viewer	~3 KB	Средняя	1	Низкая (требует jQuery)

Давайте рассмотрим примеры использования некоторых библиотек:

1. JSON Formatter

Простая библиотека, которая преобразует JSON в HTML с подсветкой синтаксиса:

Скопировать код

// Подключение библиотеки
<script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.min.js"></script>

// Использование
const data = {
name: "Алексей",
skills: ["JavaScript", "React", "Node.js"]
};

const formatter = new JSONFormatter(data, 2, {
hoverPreviewEnabled: true,
hoverPreviewArrayCount: 100,
hoverPreviewFieldCount: 5
});

document.getElementById('json-container').appendChild(formatter.render());

2. JSONViewer

Легкая библиотека с возможностью сворачивания и разворачивания узлов:

HTML

Скопировать код

// Подключение библиотеки
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.json-viewer@1.4.0/json-viewer/jquery.json-viewer.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.json-viewer@1.4.0/json-viewer/jquery.json-viewer.js"></script>

// Использование
$(document).ready(function() {
const data = {
name: "Алексей",
skills: ["JavaScript", "React", "Node.js"],
projects: {
website: "https://example.com",
github: "https://github.com/example"
}
};

$('#json-container').jsonViewer(data, {collapsed: false});
});

3. react-json-view

Если вы работаете с React, эта библиотека предоставляет мощный компонент для визуализации JSON:

Скопировать код

import ReactJson from 'react-json-view';

const MyComponent = () => {
const data = {
name: "Алексей",
skills: ["JavaScript", "React", "Node.js"]
};

return (
<div id="json-container">
<ReactJson 
src={data} 
theme="monokai" 
collapsed={1} 
enableClipboard={false} 
displayDataTypes={false}
/>
</div>
);
};

Преимущества использования специализированных библиотек:

Профессиональный внешний вид с подсветкой синтаксиса
Интерактивные возможности для работы с большими объектами данных
Дополнительные функции: поиск, копирование значений, редактирование
Возможность настройки внешнего вида через параметры или CSS

Недостатки:

Увеличение размера страницы за счет подключения дополнительных файлов
Потенциальные конфликты с другими библиотеками
Необходимость изучения API библиотеки

Выбор библиотеки зависит от конкретных потребностей вашего проекта. Для простого отображения данных в админке достаточно легких решений, а для сложных интерфейсов работы с JSON лучше выбрать более функциональные библиотеки.

Стилизация JSON в div с помощью CSS

Если вы хотите полностью контролировать внешний вид отображаемого JSON без использования сторонних библиотек, CSS-стилизация — отличный выбор. Этот подход требует немного больше кода, но позволяет создать уникальный дизайн, соответствующий стилю вашего приложения. 🎨

Основная идея заключается в преобразовании JSON-строки в HTML-структуру с классами для различных элементов (ключи, значения, строки, числа и т.д.) и последующим применением CSS-стилей к этим элементам.

Вот пример реализации:

Скопировать код

// JavaScript-функция для преобразования JSON в HTML с классами
function formatJsonToHtml(json) {
if (typeof json !== 'string') {
json = JSON.stringify(json, null, 2);
}

json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

// Подсветка разных типов данных
json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
let cls = 'json-number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'json-key';
} else {
cls = 'json-string';
}
} else if (/true|false/.test(match)) {
cls = 'json-boolean';
} else if (/null/.test(match)) {
cls = 'json-null';
}
return '<span class="' + cls + '">' + match + '</span>';
});

// Добавляем классы для структурных элементов
json = json.replace(/\{|\}/g, function(match) {
return '<span class="json-bracket">' + match + '</span>';
});

json = json.replace(/\[|\]/g, function(match) {
return '<span class="json-array-bracket">' + match + '</span>';
});

return json;
}

// Использование
const userData = {
name: "Алексей",
age: 28,
isAdmin: true,
skills: ["JavaScript", "React", "Node.js"],
contacts: {
email: "alexey@example.com",
phone: null
}
};

document.getElementById('json-container').innerHTML = 
`<pre class="json-formatter">${formatJsonToHtml(userData)}</pre>`;

Теперь добавим CSS-стили для наших классов:

CSS

Скопировать код

.json-formatter {
font-family: "Consolas", monospace;
font-size: 14px;
line-height: 1.4;
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
overflow: auto;
white-space: pre-wrap;
}

.json-key {
color: #0b7fc6;
}

.json-string {
color: #228b22;
}

.json-number {
color: #d10000;
}

.json-boolean {
color: #b819b3;
font-weight: bold;
}

.json-null {
color: #808080;
font-style: italic;
}

.json-bracket, .json-array-bracket {
color: #333;
font-weight: bold;
}

/* Улучшение визуальной иерархии */
.json-formatter:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

Вы можете расширить эту базовую реализацию, добавив дополнительные возможности:

Линии отступов: добавление вертикальных линий для улучшения визуального восприятия вложенности
Нумерация строк: полезно при работе с большими JSON-объектами
Изменение темы: создание светлой и темной тем с переключателем
Копирование по клику: добавление возможности копировать значения в буфер обмена

Пример расширенных стилей с линиями отступов:

CSS

Скопировать код

.json-formatter {
position: relative;
counter-reset: line;
}

.json-formatter > span {
display: block;
position: relative;
}

/* Линии отступов для лучшего восприятия вложенности */
.json-formatter > span {
padding-left: 20px;
}

.json-formatter > span::before {
content: "";
position: absolute;
left: 5px;
top: 0;
bottom: 0;
border-left: 1px dashed #ccc;
}

/* Нумерация строк */
.json-formatter > span::after {
counter-increment: line;
content: counter(line);
position: absolute;
left: -40px;
width: 30px;
color: #888;
text-align: right;
}

Игорь Петров, Технический директор
В проекте по анализу данных нам требовалось отображать сложные JSON-структуры, получаемые от API. Сначала мы использовали простой pre + JSON.stringify, но это было неудобно для аналитиков — они постоянно путались в данных.
Я решил создать собственное CSS-форматирование с цветовой дифференциацией типов данных. Результат превзошёл ожидания! Теперь аналитики могли мгновенно находить нужную информацию в структуре. Особенно полезным оказалось выделение числовых данных красным — именно они были ключевыми метриками в нашем случае.
Со временем мы добавили возможность нажатия на значения для их копирования и интерактивный поиск по данным. Эти простые улучшения экономили команде до 2-3 часов ежедневно при работе с отчётами.

Интерактивное форматирование JSON-данных в браузере

Высший уровень отображения JSON — это создание полностью интерактивного интерфейса, позволяющего пользователям не только просматривать, но и взаимодействовать с данными: сворачивать/разворачивать узлы, выполнять поиск, фильтрацию и даже редактирование. 🔄

Такой подход особенно полезен для:

Инструментов отладки и разработки API
Административных панелей с большим количеством данных
Интерфейсов для аналитики и работы с конфигурациями
Образовательных ресурсов, демонстрирующих структуру данных

Рассмотрим, как создать интерактивный JSON-просмотрщик с помощью JavaScript:

Скопировать код

function createInteractiveJsonViewer(jsonData, containerId) {
const container = document.getElementById(containerId);
container.className = 'interactive-json-viewer';

// Преобразуем строку JSON в объект, если необходимо
const data = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;

// Рекурсивная функция для создания интерактивного представления
function renderJsonNode(obj, level = 0) {
const wrapper = document.createElement('div');
wrapper.className = 'json-level';
wrapper.style.marginLeft = level * 20 + 'px';

if (Array.isArray(obj)) {
// Обработка массивов
const arrayHeader = document.createElement('div');
arrayHeader.className = 'json-array-header';

const toggleBtn = document.createElement('button');
toggleBtn.className = 'json-toggle';
toggleBtn.innerHTML = '▼';
toggleBtn.onclick = function() {
arrayContent.style.display = 
arrayContent.style.display === 'none' ? 'block' : 'none';
this.innerHTML = arrayContent.style.display === 'none' ? '▶' : '▼';
};

arrayHeader.appendChild(toggleBtn);
arrayHeader.appendChild(document.createTextNode(` Array[${obj.length}]`));
wrapper.appendChild(arrayHeader);

const arrayContent = document.createElement('div');
arrayContent.className = 'json-array-content';

obj.forEach((item, index) => {
const itemWrapper = document.createElement('div');
itemWrapper.className = 'json-array-item';

const indexElem = document.createElement('span');
indexElem.className = 'json-array-index';
indexElem.textContent = `${index}: `;
itemWrapper.appendChild(indexElem);

if (typeof item === 'object' && item !== null) {
itemWrapper.appendChild(renderJsonNode(item, 0));
} else {
const valueElem = document.createElement('span');
valueElem.className = `json-value json-${typeof item}`;
valueElem.textContent = typeof item === 'string' ? `"${item}"` : String(item);
itemWrapper.appendChild(valueElem);
}

arrayContent.appendChild(itemWrapper);
});

wrapper.appendChild(arrayContent);
} else if (typeof obj === 'object' && obj !== null) {
// Обработка объектов
const objHeader = document.createElement('div');
objHeader.className = 'json-object-header';

const toggleBtn = document.createElement('button');
toggleBtn.className = 'json-toggle';
toggleBtn.innerHTML = '▼';
toggleBtn.onclick = function() {
objContent.style.display = 
objContent.style.display === 'none' ? 'block' : 'none';
this.innerHTML = objContent.style.display === 'none' ? '▶' : '▼';
};

objHeader.appendChild(toggleBtn);
objHeader.appendChild(document.createTextNode(` Object{${Object.keys(obj).length}}`));
wrapper.appendChild(objHeader);

const objContent = document.createElement('div');
objContent.className = 'json-object-content';

for (const key in obj) {
const propWrapper = document.createElement('div');
propWrapper.className = 'json-property';

const keyElem = document.createElement('span');
keyElem.className = 'json-key';
keyElem.textContent = `"${key}": `;
propWrapper.appendChild(keyElem);

if (typeof obj[key] === 'object' && obj[key] !== null) {
propWrapper.appendChild(renderJsonNode(obj[key], 0));
} else {
const valueElem = document.createElement('span');
valueElem.className = `json-value json-${typeof obj[key]}`;
valueElem.textContent = typeof obj[key] === 'string' 
? `"${obj[key]}"` 
: String(obj[key]);
propWrapper.appendChild(valueElem);
}

objContent.appendChild(propWrapper);
}

wrapper.appendChild(objContent);
} else {
// Простые типы данных
const valueElem = document.createElement('span');
valueElem.className = `json-value json-${typeof obj}`;
valueElem.textContent = typeof obj === 'string' ? `"${obj}"` : String(obj);
wrapper.appendChild(valueElem);
}

return wrapper;
}

// Добавляем панель инструментов
const toolbar = document.createElement('div');
toolbar.className = 'json-toolbar';

// Кнопка для разворачивания всего
const expandAllBtn = document.createElement('button');
expandAllBtn.textContent = 'Expand All';
expandAllBtn.onclick = function() {
const contents = container.querySelectorAll('.json-array-content, .json-object-content');
contents.forEach(elem => {
elem.style.display = 'block';
});

const toggles = container.querySelectorAll('.json-toggle');
toggles.forEach(btn => {
btn.innerHTML = '▼';
});
};
toolbar.appendChild(expandAllBtn);

// Кнопка для сворачивания всего
const collapseAllBtn = document.createElement('button');
collapseAllBtn.textContent = 'Collapse All';
collapseAllBtn.onclick = function() {
const contents = container.querySelectorAll('.json-array-content, .json-object-content');
contents.forEach(elem => {
elem.style.display = 'none';
});

const toggles = container.querySelectorAll('.json-toggle');
toggles.forEach(btn => {
btn.innerHTML = '▶';
});
};
toolbar.appendChild(collapseAllBtn);

// Поле поиска
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Search...';
searchInput.oninput = function() {
const searchTerm = this.value.toLowerCase();
const allElements = container.querySelectorAll('.json-key, .json-value');

allElements.forEach(elem => {
elem.style.backgroundColor = '';

if (searchTerm && elem.textContent.toLowerCase().includes(searchTerm)) {
elem.style.backgroundColor = '#ffff00';

// Разворачиваем родительские узлы
let parent = elem.parentElement;
while (parent && !parent.classList.contains('interactive-json-viewer')) {
if (parent.classList.contains('json-array-content') || 
parent.classList.contains('json-object-content')) {
parent.style.display = 'block';

const toggleBtn = parent.previousElementSibling.querySelector('.json-toggle');
if (toggleBtn) {
toggleBtn.innerHTML = '▼';
}
}
parent = parent.parentElement;
}
}
});
};
toolbar.appendChild(searchInput);

container.appendChild(toolbar);
container.appendChild(renderJsonNode(data));

// Добавляем CSS стили
const style = document.createElement('style');
style.textContent = `
.interactive-json-viewer {
font-family: monospace;
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
max-height: 600px;
overflow: auto;
}

.json-toolbar {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}

.json-toolbar button {
margin-right: 5px;
padding: 5px 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
cursor: pointer;
}

.json-toolbar input {
padding: 5px;
margin-left: 10px;
width: 150px;
}

.json-toggle {
background: none;
border: none;
cursor: pointer;
padding: 0 5px;
color: #555;
font-size: 12px;
}

.json-key {
color: #0b7fc6;
}

.json-value {
margin-left: 5px;
}

.json-string {
color: #228b22;
}

.json-number {
color: #d10000;
}

.json-boolean {
color: #b819b3;
}

.json-null {
color: #808080;
font-style: italic;
}

.json-array-header, .json-object-header {
cursor: pointer;
font-weight: bold;
}

.json-level {
margin-bottom: 5px;
}

.json-property, .json-array-item {
margin: 5px 0;
}

.json-array-index {
color: #555;
margin-right: 5px;
}
`;
document.head.appendChild(style);
}

// Использование
const userData = {
name: "Алексей",
age: 28,
isAdmin: true,
skills: ["JavaScript", "React", "Node.js", "CSS", "HTML"],
projects: [
{
name: "E-commerce Platform",
url: "https://example.com/shop",
technologies: ["React", "Node.js", "MongoDB"],
completed: true
},
{
name: "Portfolio Website",
url: "https://example.com/portfolio",
technologies: ["HTML", "CSS", "JavaScript"],
completed: false
}
],
contacts: {
email: "alexey@example.com",
phone: "+7123456789",
social: {
github: "alexey-dev",
twitter: null
}
}
};

// Инициализация интерактивного просмотрщика
createInteractiveJsonViewer(userData, 'json-container');

Этот подход предоставляет множество возможностей для улучшения пользовательского опыта:

Полностью настраиваемый интерфейс, соответствующий дизайну вашего приложения
Возможность добавления дополнительных инструментов: копирование значений, редактирование, экспорт
Интеграция с системами авторизации для ограничения доступа к определенным данным
Возможность добавления пользовательских обработчиков для специфических типов данных (например, отображение изображений для URL-адресов с изображениями)

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

jsoneditor — полнофункциональный редактор с возможностью переключения между режимами просмотра
vue-json-viewer — компонент для Vue.js с интерактивными возможностями
react-json-inspector — легкий компонент для React с фокусом на поиск и навигацию

Для больших проектов с обработкой огромных объемов данных стоит также рассмотреть возможность виртуализации — техники, позволяющей отображать только видимую часть данных, что значительно повышает производительность.

Ошибки в отображении JSON-данных могут привести к серьезным проблемам с юзабилити и производительностью. Выбрав подходящий метод форматирования, вы не только сделаете свой интерфейс профессиональнее, но и значительно упростите отладку, тестирование и взаимодействие пользователей с вашим приложением. Удачное отображение JSON — это баланс между читабельностью, функциональностью и производительностью. Начните с простых методов, и по мере роста потребностей переходите к более сложным решениям.

5 способов красиво вывести JSON-данные в HTML-элемент div

Форматированный вывод JSON.stringify: основные подходы

Метод pre + JSON.stringify с параметрами отступов

Библиотеки для красивого отображения JSON в div

Стилизация JSON в div с помощью CSS

Интерактивное форматирование JSON-данных в браузере

Загрузка...