JSON do HTML

Powiązane Rekomendacje

O JSON do HTML i tabelach HTML

Przypadki użycia

• Programowanie front-end: szybkie renderowanie danych JSON z API do tabeli HTML do osadzania w panelach administracyjnych lub stronach dokumentacji
• Projekty Tailwind / Bootstrap: wprowadź klasy Tailwind lub Bootstrap bezpośrednio w polu klasy tabeli dla bezproblemowej integracji z istniejącym systemem stylów
• Responsywne strony: domyślne opakowanie z poziomym przewijaniem zapobiega psuciu układu na urządzeniach mobilnych
• Wizualizacja danych: wklejanie stylizowanych tabel do blogów, dokumentacji, Confluence, Notion i wszelkich platform obsługujących HTML
• Generowanie raportów: szybka konwersja danych JSON z backendu na raporty HTML do wysyłki e-mailem do interesariuszy biznesowych
• Prototypowanie front-end: podgląd stylu tabel z prawdziwymi danymi na etapie projektowania w celu uzgodnienia z produktem i designem
• Systemy CMS: tworzenie statycznych fragmentów tabel HTML dla WordPress, Drupal i innych CMS, unikając złożoności silników szablonów
• Testowanie i debugowanie: wklej wyjście JSON.stringify z konsoli przeglądarki, aby szybko podejrzeć dwuwymiarową strukturę złożonych zagnieżdżonych danych
• Szablony e-mail: wbuduj tabelę HTML w e-maile HTML (przetestuj kompatybilność z Outlookiem)
• Dokumentacja API: osadzanie tabel HTML w Markdown, Swagger, Redoc zamiast domyślnych przykładów JSON
• Scenariusze edukacyjne: konwersja zagnieżdżonych zadań JSON z kursów struktur danych na tabele do zbiorczego oceniania
• Raporty czyszczenia danych: konwersja zagnieżdżonego JSON z eksportów bazy danych na tabele przez tryb spłaszczania dla łatwego porównania pól

Jak Używać

1. Wklej tablicę JSON (zalecane) lub pojedynczy obiekt w lewym edytorze, albo kliknij „Sample" aby załadować 3 przykłady produktów, albo „Upload" aby załadować plik .json / .txt
2. Wybierz tryb obsługi zagnieżdżenia na pasku narzędzi (zalecane: „Spłaszczanie"). Zagnieżdżone obiekty automatycznie rozwiną się w klucze kropkowe jak `user.name`
3. Kliknij przycisk „Convert" (lub naciśnij Enter), aby uruchomić konwersję. Wprowadzanie jest chronione 500 ms debounce
4. Przejdź do zakładki Code po prawej, aby zobaczyć kod tabeli HTML z podświetlaniem, lub do zakładki Preview aby zobaczyć renderowanie iframe w czasie rzeczywistym
5. Zaznacz opcje stylów na pasku narzędzi (zebra / obramowanie / podświetlenie / kompakt / responsywność), wprowadź niestandardową klasę tabeli, ustaw tekst zastępczy null — podgląd aktualizuje się natychmiast
6. Gdy gotowe, kliknij „Copy" aby skopiować kod HTML lub „Download" aby pobrać jako table.html. Aby zresetować, kliknij Reset

Funkcje

• Automatyczne spłaszczanie zagnieżdżonych obiektów: rekurencyjnie rozwija `{user:{name,age}}` na klucze `user.name`, `user.age` (konfigurowalny separator), bez skryptów
• Trzy tryby obsługi zagnieżdżenia: Spłaszczanie (zalecane, do 6 poziomów) / Klucze najwyższego poziomu (zagnieżdżony obiekt jako jedna kolumna) / Ciąg (zagnieżdżony obiekt jako ciąg JSON)
• Hak niestandardowej klasy CSS: wstrzykuje dowolny ciąg klasy do `<table>` i opcjonalnego opakowania `<div>`, bezproblemowa integracja z Tailwind / Bootstrap / Bulma
• Responsywne przewijanie poziome: domyślnie zewnętrzne opakowanie `overflow-x:auto`, poziomy pasek przewijania pojawia się automatycznie na wąskich ekranach
• 6 przełączników stylów wizualnych: zebra, obramowanie, podświetlenie wierszy, tryb kompaktowy, kolumna indeksu (#), podpis tabeli — natychmiastowe zastosowanie
• Podwójne zakładki Code + iframe: Code pokazuje HTML z podświetlaniem, Preview renderuje rzeczywistą tabelę w piaskownicy iframe w czasie rzeczywistym
• Podświetlanie według typu: null — szara kursywa (konfigurowalny tekst zastępczy), wartości logiczne — zielony/czerwony, liczby — niebieski, zagnieżdżone obiekty — pełny JSON po najechaniu
• Ochrona limitu wierszy: domyślnie 1000 wierszy (1-10000), automatyczne obcięcie z powiadomieniem „Obcięto" zapobiegające opóźnieniom przeglądarki
• Statystyki generacji: prawy panel pokazuje „Wygenerowano X wierszy × Y kolumn" + znacznik obcięcia w czasie rzeczywistym
• Kopiowanie / pobieranie jednym kliknięciem: w trybie Code — kopiowanie HTML do schowka lub pobranie jako table.html
• Dane przykładowe + przesyłanie plików: 3 wbudowane przykłady produktów (Laptop / Mouse / Desk Chair) jednym kliknięciem, drag-and-drop plików .json / .txt
• Reset jednym kliknięciem: przycisk Reset na pasku narzędzi natychmiast przywraca wszystkie 14 ustawień do domyślnych
• Historia lokalna: localStorage przechowuje ostatnie 200 wprowadzonych danych, odzyskiwane po odświeżeniu lub przypadkowym zamknięciu
• W pełni lokalne przetwarzanie w przeglądarce: całe parsowanie JSON, generowanie HTML, kopiowanie i pobieranie — w przeglądarce, bez wysyłania na serwer

Przykłady kodu

// 1) Wywołanie GitHub API w celu pobrania listy użytkowników
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Funkcja spłaszczania zagnieżdżenia (równoważna logice narzędzia)
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) Konwersja spłaszczonych danych na tabelę HTML z wstrzykiwaniem klas 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) Wstrzyknięcie do strony
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Wygenerowano ' + users.length + ' wierszy, ' + (Object.keys(flattenObject(users[0])).length) + ' kolumn');

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):
    """Rekurencyjnie spłaszcza zagnieżdżone obiekty"""
    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>Brak danych</p>"

    # Obcinanie wierszy
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Spłaszczanie każdego wiersza
    flat_rows = [flatten(row) for row in data]

    # Zbieranie wszystkich nazw kolumn (set do deduplikacji, zachowując kolejność wstawiania)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Generowanie thead
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Generowanie wierszy tabeli
    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">Dane obcięte do pierwszych {max_rows} wierszy</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) Użyj jq do agregacji i spłaszczenia zagnieżdżonych logów na klucze kropkowe
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) Wklej stats.json do tego narzędzia
#    Wybierz tryb „Spłaszczanie (zalecane)" na pasku
#    Zaznacz „Zebra + Responsywne opakowanie + Obramowanie"
#    W polu nazwy klasy tabeli: min-w-full text-sm border-collapse
#    Ustaw tekst zastępczy null: - (brakujące pola wyświetlane jako -)
#    Ustaw podpis: Statystyki błędów produkcyjnych 2026-07
#    Kliknij Convert i pobierz table.html

# 3) Prześlij do statycznej witryny S3 / OSS
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Lub osadź w dokumentacji Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Lub wyślij jako e-mail HTML
mutt -e "set content_type=text/html" -s "Dziennik błędów 2026-07" your@email.com < table.html

Często Zadawane Pytania

Rozwiązywanie problemów

Słownik

Tabela HTML (HTML Table)

Standardowy element wyświetlania danych strukturalnych W3C, składający się z semantycznych tagów table / thead / tbody / tr / th / td / caption. Kod generowany przez to narzędzie ściśle przestrzega tej struktury.

Tablica JSON

Kolekcja obiektów w nawiasach kwadratowych [...]. Narzędzie używa każdego obiektu tablicy jako wiersza tabeli; pusta tablica nie generuje tabeli (wyświetlane jest powiadomienie).

Obiekt JSON

Kolekcja par klucz-wartość w nawiasach klamrowych {}. Narzędzie używa każdego klucza obiektu jako nagłówka tabeli, a wartości jako komórki; pojedynczy obiekt jest automatycznie opakowywany jako tabela jednowierszowa.

Spłaszczanie (Flatten)

Rekurencyjne rozwijanie zagnieżdżonych obiektów na płaskie klucze kropkowe, np. {user:{name:'A'}} → 'user.name'. Narzędzie obsługuje automatyczne spłaszczanie do 6 poziomów z konfigurowalnym separatorem.

thead / tbody

Dwa semantyczne podziały tabeli HTML: thead opakowuje wiersz nagłówka (th), tbody opakowuje wiersze danych (td). Kod generowany przez narzędzie ściśle rozróżnia te dwie części.

Caption (Podpis)

Tag tytułu tabeli, znajdujący się w pierwszym wierszu wewnątrz tabeli. Narzędzie obsługuje niestandardowy tekst podpisu; po włączeniu określony tytuł wyświetla się nad tabelą, co jest przydatne dla SEO i dostępności.

Zebra (Zebra Striping)

Wzorzec wizualny, w którym wiersze nieparzyste i parzyste naprzemiennie używają różnych kolorów tła, zwykle #fff / #f9fafb. Narzędzie włącza go przez pole wyboru „Zebra", znacznie poprawiając czytelność długich tabel.

Styl wbudowany (Inline Style)

CSS zapisywany bezpośrednio przez atrybut style tagu HTML, zamiast odwoływania się do zewnętrznego arkusza stylów. Narzędzie domyślnie wyprowadza wszystkie style jako wbudowany style, więc kod można użyć bez dodatkowych plików CSS.

Hak klasy CSS

Wyróżniająca cecha narzędzia: wstrzykiwanie dowolnego ciągu klasy (np. klasy Tailwind) do tagu `<table>` dla bezproblemowej integracji z istniejącymi frameworkami CSS. To kluczowa przewaga nad konkurentami.

iframe sandbox

Bezpieczny tryb piaskownicy tagu HTML iframe, który może ograniczać wykonywanie skryptów i wysyłanie formularzy. Narzędzie używa iframe z sandbox="allow-same-origin" do podglądu wygenerowanego HTML, zapobiegając przypadkowemu wykonaniu skryptu.

Podświetlanie według typu

Wyróżniająca cecha narzędzia: stosowanie różnych kolorów w zależności od typu JS wartości komórki (null / boolean / number / object / string), czyniąc debugowanie danych API bardziej intuicyjnym.

Historia localStorage

Lokalny magazyn klucz-wartość dostarczany przez przeglądarkę (pojemność ~5-10MB). Narzędzie używa localStorage do trwałego zapisywania ostatnich 200 wprowadzonych danych, które można szybko przywrócić po odświeżeniu lub przypadkowym zamknięciu.

Responsywne opakowanie (Responsive Wrapper)

Opakowanie tabeli w zewnętrzny `<div style="overflow-x:auto;max-width:100%;">`, aby na wąskich ekranach automatycznie pojawiał się poziomy pasek przewijania. Włączone domyślnie, można wyłączyć na pasku narzędzi.

Debounce

Technika optymalizacji wydajności front-end: łączenie wywołań zwrotnych zdarzeń o wysokiej częstotliwości (np. wprowadzanie) w jedno wykonanie po ostatnim wyzwoleniu. Narzędzie ustawia 500 ms debounce, aby uniknąć opóźnień przy parsowaniu dużych plików.

W3C HTML5

Specyfikacja standardu HTML opracowana przez World Wide Web Consortium (W3C). Kod generowany przez narzędzie jest zgodny ze specyfikacją HTML5 i renderuje się poprawnie we wszystkich nowoczesnych przeglądarkach.

Porównanie trzech trybów obsługi zagnieżdżenia

Pasek narzędzi oferuje trzy tryby dla różnych scenariuszy zagnieżdżenia. Wybierz na podstawie złożoności struktury JSON:

Ściągawka 14 opcji paska narzędzi

Wszystkie 14 konfigurowalnych opcji paska narzędzi i ich wizualne różnice, dla szybkiego wyboru kombinacji:

Ściągawka reguł podświetlania komórek według typu

Narzędzie automatycznie stosuje różne kolory w zależności od typu JavaScript wartości JSON dla szybkiego rozpoznawania typu danych:

Privacy & Security

To narzędzie JSON do HTML wykonuje całe parsowanie JSON, spłaszczanie zagnieżdżenia, generowanie HTML, kopiowanie i pobieranie wyłącznie w Twojej przeglądarce za pomocą JavaScript. Wprowadzone dane JSON i wygenerowany kod HTML nie są przesyłane na żaden serwer, nie są logowane, buforowane ani przechowywane w chmurze. Możesz bezpiecznie używać z poufnymi odpowiedziami API i wewnętrznymi polami biznesowymi — zamknięcie strony usuwa wszystkie dane.

Authoritative References

• MDNMDN — element HTML <table>
• MDNMDN — Podstawy tabel HTML
• W3CW3C HTML5 — element table
• MDNMDN — atrybut iframe sandbox
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — style tabel
• BootstrapBootstrap — Tabele