JSON в HTML

Похожие

О JSON в HTML и HTML-таблицах

Варианты использования

• Фронтенд-разработка: быстрый рендеринг JSON-данных из API в HTML-таблицу для встраивания в админ-панели или документацию
• Проекты на Tailwind / Bootstrap: введите классы Tailwind или Bootstrap прямо в поле класса таблицы для бесшовной интеграции с существующей системой стилей
• Адаптивные веб-страницы: адаптивная обёртка с горизонтальной прокруткой по умолчанию предотвращает поломку вёрстки на мобильных
• Визуализация данных: вставка стилизованных таблиц в блоги, документацию, Confluence, Notion и любые платформы, поддерживающие HTML
• Генерация отчётов: быстрое преобразование JSON-данных из бэкенда в HTML-отчёты для email-рассылки бизнес-заказчикам
• Прототипирование фронтенда: предпросмотр стиля таблиц с реальными данными на этапе дизайна для согласования с продуктом и дизайнерами
• CMS-системы: создание статических HTML-сниппетов таблиц для WordPress, Drupal и других CMS, избегая сложности шаблонизаторов
• Тестирование и отладка: вставьте вывод JSON.stringify из консоли браузера, чтобы быстро просмотреть двумерную структуру сложных вложенных данных
• Email-шаблоны: встраивание HTML-таблицы в HTML-письма (проверьте совместимость с Outlook)
• Документация API: встраивание HTML-таблиц в Markdown, Swagger, Redoc вместо JSON-примеров
• Учебные сценарии: преобразование вложенных JSON-заданий по структурам данных в таблицы для пакетной проверки
• Отчёты очистки данных: преобразование вложенного JSON из дампов БД в таблицы через режим сплющивания для удобного сравнения полей

Как использовать

1. Вставьте JSON-массив (рекомендуется) или один объект в левый редактор, либо нажмите «Sample» для загрузки 3 примеров товаров, либо «Upload» для загрузки .json / .txt файла
2. Выберите режим обработки вложенности на панели инструментов (рекомендуется «Сплющивание»). Вложенные объекты автоматически развернутся в точечные ключи типа `user.name`
3. Нажмите кнопку «Convert» (или просто Enter) для запуска преобразования. Ввод защищён 500 мс дебаунсом
4. На вкладке Code справа просмотрите HTML-код таблицы с подсветкой, на вкладке Preview — рендеринг iframe в реальном времени
5. Отметьте стили на панели инструментов (зебра / границы / подсветка / компакт / адаптивность), введите свой класс таблицы, задайте null-плейсхолдер — предпросмотр обновляется мгновенно
6. Когда готово, нажмите «Copy» для копирования HTML-кода или «Download» для скачивания как table.html. Для сброса нажмите Reset

Функции

• Авто-сплющивание вложенных объектов: рекурсивно разворачивает `{user:{name,age}}` в ключи `user.name`, `user.age` (настраиваемый разделитель), без скриптов
• Три режима обработки вложенности: Сплющивание (рекомендуется, до 6 уровней) / Ключи верхнего уровня (вложенный объект одной колонкой) / Строка (вложенный объект как JSON-строка)
• Пользовательский CSS-класс хук: внедряет любую строку класса в `<table>` и внешний `<div>`, бесшовная интеграция с Tailwind / Bootstrap / Bulma
• Адаптивная горизонтальная прокрутка: внешний контейнер `overflow-x:auto` по умолчанию, горизонтальная прокрутка на узких экранах без поломки вёрстки
• 6 визуальных переключателей: зебра, границы, подсветка строк, компактный режим, индексный столбец (#), заголовок таблицы — мгновенное применение
• Двойные вкладки Code + iframe: Code показывает HTML с подсветкой, Preview рендерит реальную таблицу в защищённом iframe в реальном времени
• Подсветка по типу: null — серый курсив (настраиваемый плейсхолдер), булевы — зелёный/красный, числа — синий, вложенные объекты — полный JSON по наведению
• Защита лимита строк: по умолчанию 1000 строк (1-10000), авто-усечение с уведомлением «Усечено» для предотвращения тормозов браузера
• Статистика генерации: правая панель показывает «X строк × Y столбцов» + значок усечения в реальном времени
• Копирование / скачивание в один клик: в режиме Code — копирование HTML в буфер или скачивание как table.html
• Образцы данных + загрузка файлов: 3 встроенных примера товаров (Laptop / Mouse / Desk Chair) в один клик, drag-and-drop .json / .txt файлов
• Сброс в один клик: кнопка Reset на панели инструментов мгновенно восстанавливает все 14 настроек по умолчанию
• Локальная история: localStorage хранит последние 200 вводов, восстанавливается после обновления или случайного закрытия
• Полностью локальная работа браузера: весь парсинг JSON, генерация HTML, копирование и скачивание — в браузере, без передачи на сервер

Примеры кода

// 1) Вызов GitHub API для получения списка пользователей
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Функция сплющивания (эквивалентна логике инструмента)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) Преобразование сплющенных данных в HTML-таблицу с внедрением Tailwind-классов
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) Внедрение в страницу
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Сгенерировано ' + users.length + ' строк, ' + (Object.keys(flattenObject(users[0])).length) + ' столбцов');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """Рекурсивное сплющивание вложенных объектов"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>Нет данных</p>"

    # Усечение строк
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Сплющивание каждой строки
    flat_rows = [flatten(row) for row in data]

    # Сбор всех имён столбцов (set для дедупликации, сохраняя порядок вставки)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Генерация thead
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Генерация строк таблицы
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">Данные усечены до первых {max_rows} строк</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) Агрегация и сплющивание вложенных логов в точечные ключи через jq
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) Вставьте stats.json в инструмент
#    Выберите режим «Сплющивание (рекомендуется)» в панели
#    Отметьте «Зебра + Адаптивная обёртка + Границы»
#    В поле имени класса таблицы: min-w-full text-sm border-collapse
#    Null-плейсхолдер: - (отсутствующие поля отображаются как -)
#    Заголовок: 2026-07 Статистика ошибок продакшена
#    Нажмите Convert и скачайте table.html

# 3) Загрузка на S3 / OSS-статический сайт
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Или встраивание в Confluence / Notion / VuePress-документацию
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Или отправка как HTML-письмо
mutt -e "set content_type=text/html" -s "Лог ошибок 2026-07" your@email.com < table.html

Часто задаваемые вопросы

Устранение неполадок

Глоссарий

HTML-таблица (HTML Table)

Стандартный элемент отображения структурированных данных W3C, состоящий из семантических тегов table / thead / tbody / tr / th / td / caption. Код, генерируемый этим инструментом, строго следует этой структуре.

JSON-массив

Коллекция объектов в квадратных скобках [...]. Инструмент использует каждый объект массива как строку таблицы; пустой массив не генерирует таблицу (отображается уведомление).

JSON-объект

Коллекция пар ключ-значение в фигурных скобках {}. Инструмент использует каждый ключ объекта как заголовок таблицы, а значение — как ячейку; один объект автоматически оборачивается как однострочная таблица.

Сплющивание (Flatten)

Рекурсивное разворачивание вложенных объектов в плоские точечные ключи, например {user:{name:'A'}} → 'user.name'. Инструмент поддерживает авто-сплющивание до 6 уровней с настраиваемым разделителем.

thead / tbody

Два семантических раздела HTML-таблицы: thead оборачивает строку заголовка (th), tbody оборачивает строки данных (td). Код, генерируемый инструментом, строго разделяет эти две части.

Caption

Тег заголовка таблицы, расположенный в первой строке внутри таблицы. Инструмент поддерживает настраиваемый текст заголовка; при включении указанный заголовок отображается над таблицей, что полезно для SEO и доступности.

Зебра (Zebra Striping)

Визуальный паттерн, при котором нечётные и чётные строки чередуются с разными цветами фона, обычно #fff / #f9fafb. Инструмент включает его через чекбокс «Зебра», значительно улучшая читаемость длинных таблиц.

Встроенный стиль (Inline Style)

CSS, записанный напрямую через атрибут style HTML-тега, а не через ссылку на внешнюю таблицу стилей. Инструмент по умолчанию выводит все стили как встроенный style, поэтому код можно использовать как есть, без дополнительных CSS-файлов.

CSS-класс хук

Дифференцированная возможность инструмента: внедрение любой строки класса (например, Tailwind-класса) в тег `<table>` для бесшовной интеграции с существующими CSS-фреймворками. Это ключевое преимущество перед конкурентами.

iframe sandbox

Безопасный режим песочницы HTML-тега iframe, который может ограничивать выполнение скриптов и отправку форм. Инструмент использует iframe с sandbox="allow-same-origin" для предпросмотра сгенерированного HTML, предотвращая случайное выполнение скриптов.

Подсветка по типу

Дифференцированная возможность инструмента: применение разных цветов в зависимости от JS-типа значения ячейки (null / boolean / number / object / string), делая отладку API-данных более интуитивной.

localStorage история

Локальное хранилище ключ-значение, предоставляемое браузером (объём ~5-10 МБ). Инструмент использует localStorage для постоянного сохранения последних 200 вводов, которые можно быстро восстановить после обновления или случайного закрытия.

Адаптивная обёртка (Responsive Wrapper)

Оборачивание таблицы во внешний `<div style="overflow-x:auto;max-width:100%;">`, чтобы на узких экранах автоматически появлялась горизонтальная прокрутка. Включено по умолчанию, можно отключить на панели инструментов.

Дебаунс (Debounce)

Техника оптимизации фронтенд-производительности: объединение высокочастотных колбэков событий (например, ввода) в одно выполнение после последнего срабатывания. Инструмент устанавливает 500 мс дебаунс, чтобы избежать задержек при парсинге больших файлов.

W3C HTML5

Стандартная спецификация HTML, разработанная World Wide Web Consortium (W3C). Код, генерируемый инструментом, соответствует спецификации HTML5 и корректно рендерится во всех современных браузерах.

Сравнение трёх режимов обработки вложенности

Панель инструментов предоставляет три режима для разных сценариев вложенности. Выбирайте исходя из сложности структуры JSON:

Шпаргалка по 14 опциям панели инструментов

Все 14 настраиваемых опций панели инструментов и их визуальные различия для быстрого выбора комбинации:

Шпаргалка по правилам подсветки ячеек по типу

Инструмент автоматически применяет разные цвета в зависимости от JS-типа значения JSON для быстрого распознавания типа данных:

Privacy & Security

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

Authoritative References

• MDNMDN — HTML элемент <table>
• MDNMDN — Основы HTML-таблиц
• W3CW3C HTML5 — элемент table
• MDNMDN — атрибут iframe sandbox
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — стили таблиц
• BootstrapBootstrap — таблицы