JSON'dan HTML Tabloya

Nasıl çalışır?

JSON verisini sol panele yapıştırın; HTML tablo kodu sağ panelde hemen oluşur. Nesnelerden oluşan bir dizi (köşeli parantez içinde süslü parantezli kayıtlar) satır satır tabloya dönüşür: sütun başlıkları tüm kayıtlardaki anahtarların birleşimidir, bir kayıtta olmayan alan boş hücre kalır. Tek bir nesne yapıştırırsanız iki sütunlu "Alan / Değer" tablosu çıkar. Örnekte iki kişinin kaydı var; ikincisinde ilçe bilgisi yok, ama "not" alanı var. Düzleştir ayarında adres nesnesi adres.il ve adres.ilce sütunlarına ayrılır, sonuç 2 satır, 5 sütundur ve eksik hücreler boş bırakılır. İç tablo ayarında adres hücresinin içine küçük bir tablo çizilir. [1, 2, 3] gibi basit listeler hücrede "1, 2, 3" diye yazılır. "Fiyat < 100 & stokta" gibi metinler &lt; ve &amp; ile kaçışlanır; sayfada yine aynı görünür ama tarayıcı onu etiket sanmaz. Kodu WordPress'te "Özel HTML" bloğuna ya da e-posta şablonunun kaynak alanına yapıştırın.

Bu araç json to html, json to html table, json to html converter aramalarıyla da biliniyor.

JSON nedir?

JSON (JavaScript Object Notation), verinin metin olarak taşındığı yaygın bir biçimdir. Süslü parantez {} anahtar-değer çiftlerinden oluşan bir nesneyi, köşeli parantez [] sıralı bir listeyi gösterir; değerler metin, sayı, true/false, null ya da yine nesne ve liste olabilir. Web servislerinin ve uygulamaların çoğu veriyi JSON olarak gönderir. JSON okunabilir bir metindir ama tablo gibi görsel bir düzeni yoktur; bir sayfada göstermek için HTML'e çevrilmesi gerekir.

Düzleştirme (flatten) nedir?

Düzleştirme, iç içe yapıdaki her değeri tek düzeyli bir anahtar altında toplamaktır. Yol, anahtarların nokta ile birleştirilmesiyle yazılır: {"adres": {"il": "İzmir"}} yapısı adres.il = İzmir olur. Böylece iç içe veri, satır ve sütundan oluşan tablo biçimine sığar. Düzleştirme bilgi kaybetmez, ama çok derin ya da çok alanlı yapılarda sütun sayısını hızla artırır; o durumda iç tablo daha okunaklıdır.

JSON'dan CSV'ye ile JSON'dan HTML tabloya arasındaki fark nedir?

İkisi de JSON'daki kayıtları satır ve sütuna dizer, ama çıktının gideceği yer farklıdır. CSV yalnız veridir; Excel'de açılmak ya da başka bir programa aktarılmak içindir, görünüm bilgisi taşımaz. HTML tablo ise etiketlerle yazılmış koddur; bir web sayfasında, blog yazısında ya da HTML e-postada doğrudan görüntülenmek içindir ve başlık hücresi, iç tablo gibi yapıları taşıyabilir. Veriyi işleyecekseniz CSV, göstereceksiniz HTML tablo seçin.

Düzleştirme mi iç tablo mu

Düzleştirme, iç içe nesnenin her alanını nokta ile birleştirilmiş ayrı bir sütun yapar: {"adres": {"il": "İzmir"}} kaydı adres.il sütununa İzmir yazar. Tablo tek düzeyde kalır; sütunlara göre sıralanabilir, Excel'e kopyalandığında hücreler doğru yere düşer. Çoğu durumda doğru seçim budur.

İç tablo, iç içe yapıyı olduğu gibi korur: adres hücresinin içine il ve ilçe satırları olan küçük bir tablo çizilir. Kayıtlar farklı derinlikte ya da çok alanlı alt nesneler taşıyorsa (sipariş içindeki ürün listesi gibi) iç tablo okunaklı kalır; düzleştirme onlarca sütun üretirdi. İç tablo ayarında nesne dizileri de iç tabloya dönüşür.

• {"adres": {"il": "İzmir"}} → düzleştir: adres.il sütunu
• [{"a":1},{"b":2}] → a ve b sütunları, eksikler boş
• "<b>yeni</b>" → &lt;b&gt;yeni&lt;/b&gt; (kalın yazıya dönüşmez)

Kaçış ve güvenlik: JSON'daki metin neden olduğu gibi konmaz

JSON verisi çoğu zaman bir API'den ya da kullanıcıların doldurduğu bir formdan gelir. Bir alanda <script> ya da <img onerror=...> gibi bir metin varsa ve bu metin kaçışlanmadan sayfaya konursa ziyaretçinin tarayıcısında kod çalışabilir; buna siteler arası betik (XSS) denir. Bu araç her anahtarı ve değeri he kütüphanesiyle kaçışlar: <, >, &, tırnak ve kesme işareti varlık adlarına çevrilir.

Kaçışlanan metin sayfada aynen görünür; kaybolan tek şey, metnin kod olarak yorumlanma ihtimalidir. Tabloyu stillendirmek isterseniz kodu olduğu gibi bırakıp sitenizin CSS'inde table, th ve td için kural yazın; hazır bir tema kullanıyorsanız tablo zaten temanın görünümünü alır.

Sık sorulanlar

JSON nasıl HTML tabloya çevrilir?

JSON verisini sol panele yapıştırın. Nesne dizisiyse her nesne bir satır, her anahtar bir sütun olur; tek nesneyse Alan/Değer tablosu çıkar. Sağ paneldeki kodu kopyalayıp sayfanızın HTML düzenleyicisine yapıştırmanız yeterlidir.

Kayıtlarda farklı alanlar varsa ne olur?

Sütunlar bütün kayıtlardaki anahtarların birleşimidir, ilk görüldükleri sırayla dizilir. Bir kayıtta olmayan alanın hücresi boş kalır; hiçbir değer kaymaz ve yanlış sütuna düşmez.

İç içe JSON tabloda nasıl görünür?

"İç içe nesneler" ayarı "Düzleştir" ise adres.il gibi noktalı sütun adları oluşur. "İç tablo" seçerseniz iç içe nesne ve nesne listeleri hücrenin içinde ayrı bir küçük tabloya yazılır.

Yapıştırdığım veri bir yere gönderiliyor mu?

Hayır. Dönüşüm tamamen tarayıcınızda yapılır; müşteri listesi ya da API yanıtı yapıştırsanız bile veri bu sayfadan çıkmaz.