JSON - HTML Tablo Dönüştürücüsü(JSON to HTML Converter)
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/>
<textarea cols="70" rows="20" name="jsonGir"></textarea><br />
<input type="button" value="JSON İçeriğini Göster" onclick="objGoster()" />
<table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;
border: solid 1px #f00;" cellspacing="0" cellpadding="0">
</table>
<script>
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
Yorumlar
Yorum Gönder