Turgut Arslan: JSON Örnek

JSON verilerini HTML tabloya çeviren basit bir JavaScript uygulaması yaptım. Kodlar aşağıdaki gibidir.

<!DOCTYPE html>

<html>

<body>

<style>

.objeTablo th,

.objeTablo tr,

.objeTablo td {

padding: 5px;

border: solid 1px #f00;

color: #717171;

text-align: center;

}

</style>

<h2>HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın</h2>

<strong>Bu kod sadece 1 seviye değerleri gösterir.Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz. </strong><br/>

<table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;

border: solid 1px #f00;" cellspacing="0" cellpadding="0">

</table>

function objGoster() {

var jsonVeri = document.getElementsByName("jsonGir")[0].value;

var obj = JSON.parse(jsonVeri);

var nesneBaslikSay = Object.keys(obj[0]).length;

var icerik = "<tr>";

var icerikBaslik = "<tr>";

var icerikDeger = "";

for (i = 0; i < nesneBaslikSay; i++) {

icerikBaslik += "<th> " + Object.keys(obj[0])[i] + " </th>";

}

icerikBaslik += "</tr>";

for (i = 0; i < obj.length; i++) {

for (j = 0; j < nesneBaslikSay; j++) {

icerikDeger += "<td> " + obj[i][Object.keys(obj[i])[j]] + " </td>";

}

icerikDeger += "</tr>";

}

icerik += icerikDeger;

document.getElementById("tabloIcerik").innerHTML = icerikBaslik + icerik;

}

</script>

</body>

</html>

Bu kodların çalışan hali,

HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın

Bu kod sadece 1. seviye değerleri gösterir. Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz.
Not: Eğer JSON kodunuz okunmadıysa kodu [ ] parantezleri arasın alın. Bu basit bir kod ve arraya dönüşmeyen içerikleri okuyamıyor

Javascript ile JSON formatında gelen verileri kolaylıkla parse edip bir tabloda okunaklı veriler haline getirebilirsiniz..

Örnek Kod

<!DOCTYPE html>
<html>
<body>
<style>
.musteriTablo th, .musteriTablo tr, .musteriTablo td
{
padding: 5px;
border: solid 1px #f00;
color: #717171;
text-align: center;
}
</style>
<table id="tabloIcerik" class="musteriTablo" style="max-width: 800px; height: auto;
border: solid 1px #f00;" cellspacing="0" cellpadding="0">
<tr>
<th>
Sipariş No
</th>
<th>
Müşteri Adı Soyadı
</th>
<th>
Sipariş Toplamı
</th>
</tr>
</table>
<script>
var musteriler = '[{"no":"125212", "musteriAd":"Selami Parmak", "toplam":"1700 TL"},{"no":"125234", "musteriAd":"Fatih Sila", "toplam":"1800 TL"},{"no":"125365", "musteriAd":"Fethi Arsen", "toplam":"1700 TL"},{"no":"125324", "musteriAd":"Turgut Arslan", "toplam":"1900 TL"}]';
var obj = JSON.parse(musteriler);
var icerik = "";
for (i = 0; i < obj.length; i++) {
icerik += "<tr><td> " + obj[i].no + " </td><td> " + obj[i].musteriAd + " </td><td> " + obj[i].toplam + " </td></tr>";
}
document.getElementById("tabloIcerik").innerHTML += icerik;

</script>
</body>
</html>

Kodları Çalıştırdığınız Zaman;

See the Pen Basit Bir JSON Parsing Örneği by Turgut Arslan (@draguth) on CodePen.

Saygılarımla... Turgut Arslan

Turgut Arslan

JSON - HTML Tablo Dönüştürücüsü(JSON to HTML Converter)

HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın

Javascript JSON Parsing Örnek 1

Google Ads'te TBM Düşüren Bir Anahtar Kelime Stratejisi