JSON'dan HTML'ye

İlgili Öneriler

JSON'dan HTML'ye ve HTML Tabloları Hakkında

Kullanım senaryoları

• Ön uç geliştirme: API'den dönen JSON verilerini hızla HTML tablosuna dönüştürerek yönetici panolarına veya dokümantasyon sayfalarına gömme
• Tailwind / Bootstrap projeleri: tablo sınıfı alanına doğrudan Tailwind veya Bootstrap sınıfı yapıştırarak mevcut stil sistemiyle sorunsuz entegrasyon
• Duyarlı web sayfaları: varsayılan yatay kaydırma sarması, mobil tabloların sayfa düzenini bozmasını önler
• Veri görselleştirme görüntüleme: stilli tabloları blog, dokümantasyon, Confluence, Notion ve HTML gömmeyi destekleyen tüm platformlara yapıştırma
• Rapor oluşturma: arka uçtan dışa aktarılan JSON verilerini iş paydaşlarına gönderilecek HTML e-posta raporlarına hızla dönüştürme
• Ön uç prototipleme: tasarım aşamasında gerçek verilerle tablo stillerini önizleyerek teslimattan önce ürün ve tasarımla uyum sağlama
• CMS sistemleri: WordPress, Drupal ve diğer CMS'ler için statik HTML tablo parçacıkları oluşturarak şablon motoru karmaşıklığından kaçınma
• Test ve hata ayıklama: tarayıcı konsolundaki JSON.stringify çıktısını yapıştırarak karmaşık iç içe verilerin iki boyutlu yapısını hızla önizleme
• E-posta şablonları: tablo HTML'sini HTML e-postalarına satır içi olarak göme (Outlook uyumluluğunu test edin)
• API dokümantasyonu yazımı: Markdown, Swagger, Redoc'a varsayılan JSON örnekleri yerine HTML tabloları gömme
• Eğitim senaryoları: veri yapıları derslerinde öğrencilerin gönderdiği iç içe JSON ödevlerini toplu değerlendirme için tabloya dönüştürme
• Veri temizleme raporları: veritabanı dışa aktarımlarından gelen iç içe JSON'u Düzleştirme moduyla alan karşılaştırması için tabloya dönüştürme

Nasıl Kullanılır

1. JSON dizisini (önerilen) veya tek bir nesneyi sol düzenleyiciye yapıştırın veya 3 ürün örneğini yüklemek için "Sample" düğmesine, .json / .txt dosyası yüklemek için "Upload" düğmesine tıklayın
2. Araç çubuğundan iç içe işleme modunu seçin (önerilen: "Düzleştirme"). İç içe nesneler otomatik olarak `user.name` gibi nokta ayrılmış anahtarlara genişler
3. Dönüşümü tetiklemek için "Convert" düğmesine tıklayın (veya Enter tuşuna basın). Giriş 500 ms debounce ile korunur
4. Sağdaki Code sekmesinde sözdizimi vurgulamalı HTML tablo kodunu, Preview sekmesinde iframe gerçek zamanlı oluşturmayı görüntüleyin
5. Araç çubuğundaki stil seçeneklerini (zebra / kenarlık / vurgu / kompakt / duyarlı) işaretleyin, özel tablo sınıfı girin, null yer tutucusunu ayarlayın. Canlı önizleme anında güncellenir
6. Hazır olduğunda, HTML kodunu kopyalamak için "Copy" düğmesine veya table.html olarak indirmek için "Download" düğmesine tıklayın. Sıfırlamak için Reset düğmesine tıklayın

Özellikler

• İç içe nesne otomatik düzleştirme: `{user:{name,age}}` öğesini `user.name`, `user.age` gibi nokta anahtarlarına özyinelemeli olarak genişletir (yapılandırılabilir ayırıcı), betik gerekmez
• Üç iç içe işleme modu: Düzleştirme (Önerilen, 6 seviyeye kadar) / Üst Düzey Anahtarlar (iç içe nesne tek sütun olarak) / Dize (iç içe nesne JSON dizesi olarak)
• Özel CSS sınıfı kancası: `<table>` ve isteğe bağlı dış `<div>` öğesine herhangi bir sınıf dizesi enjekte eder, Tailwind / Bootstrap / Bulma ile sorunsuz entegrasyon
• Duyarlı yatay kaydırma: varsayılan olarak dış sarma `overflow-x:auto`, dar ekranlarda yatay kaydırma çubuğu otomatik olarak görünür
• 6 görsel stil değiştirici: zebra, kenarlık, satır vurgusu, kompakt mod, ilk indeks sütunu (#), tablo başlığı — araç çubuğu onay kutularıyla anında uygulanır
• Code + iframe önizleme çift sekmesi: Code sekmesi sözdizimi vurgulamalı HTML kaynağını gösterir, Preview sekmesi korumalı iframe'de gerçek tabloyu gerçek zamanlı işler
• Tür farkında vurgulama: null gri italik (yapılandırılabilir yer tutucu metin), boolean'lar yeşil/kırmızı, sayılar mavi, iç içe nesneler fareyle üzerine gelince tam JSON
• Satır sınırı koruması: varsayılan 1000 satır sınırı (1-10000 arası ayarlanabilir), aşıldığında otomatik kesme ve "Kesildi" bildirimi
• Üretim istatistikleri geri bildirimi: sağ panel "X satır × Y sütun üretildi" + kesme rozetini gerçek zamanlı gösterir
• Tek tıkla kopyalama / indirme: Code modunda HTML kaynağını panoya kopyalayın veya table.html dosyası olarak indirin
• Örnek veri + dosya yükleme: 3 yerleşik ürün örneği (Laptop / Mouse / Desk Chair) tek tıkla yükleme, .json / .txt dosyalarını sürükle bırak veya tıklama yükleme
• Tek tıkla sıfırlama: araç çubuğundaki Sıfırla düğmesi tüm 14 ayarı anında varsayılanlara döndürür
• Yerel geçmiş: localStorage tabanlı, son 200 girişi kalıcı olarak saklar, yenileme veya yanlışlıkla sekme kapandıktan sonra kurtarılabilir
• Tamamen tarayıcıda yerel işleme: tüm JSON ayrıştırma, HTML oluşturma, kopyalama ve indirme tarayıcınızda gerçekleşir, veri hiçbir sunucuya gönderilmez

Kod Örnekleri

// 1) GitHub API'yi çağırarak kullanıcı listesini al
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) İç içe düzleştirme fonksiyonu (aracın düzleştirme mantığına eşdeğer)
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) Düzleştirilmiş verileri HTML tablosuna dönüştür, Tailwind sınıfları enjekte et
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) Sayfaya enjekte et
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log(users.length + ' satır, ' + (Object.keys(flattenObject(users[0])).length) + ' sütun üretildi');

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):
    """İç içe nesneleri özyinelemeli olarak düzleştirir"""
    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>Veri yok</p>"

    # Satır kesme
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Her satırı düzleştir
    flat_rows = [flatten(row) for row in data]

    # Tüm sütun adlarını topla (tekilleştirme için set, ekleme sırasını koru)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

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

    # Tablo satırlarını oluştur
    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">Veri ilk {max_rows} satıra kesildi</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 kullanarak iç içe günlükleri toplayın ve nokta ayrılmış anahtarlara düzleştirin
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'ı bu araca yapıştırın
#    Araç çubuğundan "Düzleştirme (Önerilen)" modunu seçin
#    "Zebra + Duyarlı Sarma + Kenarlık" seçeneklerini işaretleyin
#    Tablo sınıfı adı alanına: min-w-full text-sm border-collapse girin
#    Null yer tutucusunu - olarak ayarlayın (eksik alanlar - olarak gösterilir)
#    Başlığı: 2026-07 Üretim Hata Günlüğü İstatistikleri olarak ayarlayın
#    Convert'e tıklayın ve table.html dosyasını indirin

# 3) S3 / OSS statik sitesine yükleyin
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Veya Confluence / Notion / VuePress belgelerine gömün
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Veya HTML e-posta olarak gönderin
mutt -e "set content_type=text/html" -s "2026-07 Hata Günlüğü" your@email.com < table.html

Sık Sorulan Sorular

Sorun Giderme

Sözlük

HTML Tablosu (HTML Table)

W3C standart yapılandırılmış veri görüntüleme öğesi, table / thead / tbody / tr / th / td / caption gibi semantik etiketlerden oluşur. Bu aracın ürettiği kod bu yapıyı sıkı bir şekilde takip eder.

JSON Dizisi

Köşeli parantezler [...] içine alınmış nesne koleksiyonu. Araç, dizideki her nesneyi tablonun bir satırı olarak kullanır; boş dizi tablo oluşturmaz (bildirim gösterilir).

JSON Nesnesi

Kıvırcık parantezler {} içine alınmış anahtar-değer çiftleri koleksiyonu. Araç, nesnenin her anahtarını tablo başlığı, değerini hücre olarak kullanır; tek nesne otomatik olarak tek satırlık tabloya sarılır.

Düzleştirme (Flatten)

İç içe nesneleri noktayla ayrılmış düz anahtarlara özyinelemeli olarak genişletme, örn. {user:{name:'A'}} → 'user.name'. Araç, yapılandırılabilir ayırıcı ile 6 seviyeye kadar otomatik düzleştirmeyi destekler.

thead / tbody

HTML tablosunun iki semantik bölümü: thead başlık satırını (th) sarar, tbody veri satırlarını (td) sarar. Aracın ürettiği kod bu iki kısmı sıkı bir şekilde ayırır.

Caption

Tablo başlık etiketi, tablonun içindeki ilk satırda bulunur. Araç özel başlık metnini destekler; etkinleştirildiğinde belirtilen başlık tablonun üstünde görüntülenir, SEO ve erişilebilirlik için yararlıdır.

Zebra (Zebra Striping)

Tek ve çift satırların farklı arka plan renklerini dönüşümlü olarak kullandığı görsel desen, genellikle #fff / #f9fafb kombinasyonu kullanılır. Araç, "Zebra" onay kutusu ile bunu etkinleştirir, uzun tabloların okunabilirliğini önemli ölçüde artırır.

Satır İçi Stil (Inline Style)

Harici stil sayfasına başvurmak yerine, HTML etiketinin style özniteliği aracılığıyla doğrudan CSS yazma. Araç varsayılan olarak tüm stilleri satır içi style olarak çıkarır, böylece kod ek CSS dosyası olmadan kullanılabilir.

CSS sınıfı kancası

Aracın farklılaştırıcı özelliği: `<table>` etiketine herhangi bir sınıf dizesi (örn. Tailwind sınıfı) enjekte ederek mevcut CSS çatılarıyla sorunsuz entegrasyon. Bu rakiplere karşı önemli bir yükseltmedir.

iframe sandbox

HTML iframe etiketinin güvenli korumalı alan modu, betik yürütme ve form gönderimini kısıtlayabilir. Araç, üretilen HTML'yi önizlemek için sandbox="allow-same-origin" iframe'ini kullanır, yanlışlıkla betik yürütülmesini önler.

Tür farkında vurgulama

Aracın farklılaştırıcı özelliği: hücre değerinin JS türüne (null / boolean / number / object / string) göre farklı renkler uygulayarak API verilerinin hata ayıklamasını daha sezgisel hale getirir.

localStorage geçmişi

Tarayıcı tarafından sağlanan yerel anahtar-değer deposu (kapasite yaklaşık 5-10MB). Araç, son 200 girişi kalıcı olarak saklamak için localStorage kullanır, yenileme veya yanlışlıkla sekme kapandıktan sonra hızla geri yüklenebilir.

Duyarlı Sarma (Responsive Wrapper)

Tabloyu dış `<div style="overflow-x:auto;max-width:100%;">` içine sararak dar ekranlarda otomatik olarak yatay kaydırma çubuğu görünmesini sağlama. Varsayılan olarak etkindir, araç çubuğundan kapatılabilir.

Debounce

Ön uç performans optimizasyon tekniği: yüksek frekanslı olayların (örn. giriş) geri aramalarını son tetiklemeden sonra tek bir yürütmeye birleştirme. Araç, büyük dosya ayrıştırmadaki gecikmeleri önlemek için 500 ms debounce ayarlar.

W3C HTML5

World Wide Web Consortium (W3C) tarafından geliştirilen HTML standart spesifikasyonu. Aracın ürettiği kod HTML5 spesifikasyonuna uygundur ve tüm modern tarayıcılarda doğru şekilde işlenir.

Üç İç İçe İşleme Modu Karşılaştırma Tablosu

Araç çubuğu farklı iç içe senaryolar için üç mod sağlar. JSON yapısının karmaşıklığına göre seçin:

Araç Çubuğu 14 Yapılandırılabilir Seçenek Kopya Kağıdı

Araç çubuğundaki tüm 14 yapılandırılabilir seçenek ve hızlı kombinasyon seçimi için görsel farklılıkları:

Hücre Tür Farkında Vurgulama Kuralları Kopya Kağıdı

Araç, hızlı veri türü tanıma için JSON değerinin JavaScript türüne göre farklı renkleri otomatik olarak uygular:

Privacy & Security

Bu JSON'dan HTML'ye aracı, tüm JSON ayrıştırma, iç içe düzleştirme, HTML oluşturma, kopyalama ve indirme işlemlerini yalnızca JavaScript aracılığıyla tarayıcınızda çalıştırır. Girilen JSON verileri ve üretilen HTML kodu hiçbir sunucuya yüklenmez, kaydedilmez, önbelleğe alınmaz veya bulutta depolanmaz. Yayınlanmamış API yanıtları ve dahili iş alanları gibi hassas JSON'larla güvenle kullanabilirsiniz — sayfayı kapattığınızda tüm veriler silinir.

Authoritative References

• MDNMDN — HTML <table> öğesi
• MDNMDN — HTML Tabloları Temelleri
• W3CW3C HTML5 Belirtimi — table öğesi
• MDNMDN — iframe sandbox özniteliği
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — Tablo Stilleri
• BootstrapBootstrap — Tablolar