Bu dersimizde JSON formatında hazırlanmış verilerden nasıl tablo oluşturulacağından bahsedeceğim. Bu işlem için JSON verisini okuyup gerekli tablo alanlarına yazılarak çıktı verilmesini sağlayacağız. Tablo satır ve sütunları da javascript ile oluşturup belirlenen DIV etiketine direkt çıktı verilmesini sağlayacağız.
İlk olarak JSON yapısını oluşturalım. Sonrasında bu verileri kullanarak tablo üzerine yazdırarak farklı bir çıktı almış olalım.
[
{
"Sıra" : "1",
"Kitap Adı" : "Her Yönüyle PHP",
"Yazar" : "ibrahim Çevrük",
"Sayfa Sayısı" : "808"
},
{
"Sıra" : "2",
"Kitap Adı" : "Serenad",
"Yazar" : "Zülfü Livaneli",
"Sayfa Sayısı" : "481"
},
{
"Sıra" : "3",
"Kitap Adı" : "Hayvan Çiftliği",
"Yazar" : "George Orwell",
"Sayfa Sayısı" : "152"
}
]
Yukarıda yer alan JSON bilgilerini kullanarak Javascript ile Tablo formatında çıktı alalım. Bu çıktıyı da bir buton oluşturup, butona tıklatılması sonucu gösterilmesini sağlayalım. Bunun içinde bir buton ve gelen sonucun yazdırılacağı div etiketini oluşturalım.
<input type="button" onclick="JSONTabloYap()" value="JSON Değerini Tablo Yap!" /> <div id="tabloCiktisi"></div>
Yukarıdaki gibi butonu ve tablo çıktısının yer alacağı DIV etiketini oluşturuyoruz. Butonda yer aldığı gibi onclick ile JSONTabloYap() fonksiyonun çalıştırıyoruz. Bu fonksiyonda da tablo oluşturup gerekli değerleri yazdırarak çıktı alıyoruz.
<script>
function JSONTabloYap(){
var jsonVerisi = [
{
"Sıra" : "1",
"Kitap Adı" : "Her Yönüyle PHP",
"Yazar" : "ibrahim Çevrük",
"Sayfa Sayısı" : "808"
},
{
"Sıra" : "2",
"Kitap Adı" : "Serenad",
"Yazar" : "Zülfü Livaneli",
"Sayfa Sayısı" : "481"
},
{
"Sıra" : "3",
"Kitap Adı" : "Hayvan Çiftliği",
"Yazar" : "George Orwell",
"Sayfa Sayısı" : "152"
}
]
// Tablonun üst bölümünü oluşturuyoruz.
var col = [];
for (var i = 0; i < jsonVerisi.length; i++){
for (var key in jsonVerisi[i]){
if (col.indexOf(key) === -1){ col.push(key); }
}
}
// Tablo oluşturuyoruz.
var tablo = document.createElement("table");
// Tablo satırları
var tr = tablo.insertRow(-1);
// Değerleri Yazıyoruz (TH) oluşturduk.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
// Verileri yazdırıyoruz.
for (var i = 0; i < jsonVerisi.length; i++){
tr = tablo.insertRow(-1);
for (var j = 0; j < col.length; j++){
var satir = tr.insertCell(-1);
satir.innerHTML = jsonVerisi[i][col[j]];
}
}
// Son olarak tablo değerini çıktı olarak sunuyoruz.
var divYazdir = document.getElementById("tabloCiktisi");
divYazdir.innerHTML = "";
divYazdir.appendChild(tablo);
}
</script>
Yukarıdaki kodlarla birlikte JSON verisini okutup tablo üzerinden listelem yapabilirsiniz.Daha düzenli bir çıktı alabilmek için CSS kodlarıyla süsleme yapabilirsiniz. Hatta bu kadar yapmışken aşağıdaki kodları da ekleyerek biraz düzenli bir tablo çıktısına sahip olabilirsiniz.
<style>
th, td, p, input {font:14px Verdana}
table, th, td{border: solid 1px #3a3a3a;border-collapse: collapse;padding: 5px 10px;text-align: center}
th{font-weight:bold; background:#ddd}
</style>
CSS düzenlemesiyle birlikte JSON değerlerini TABLO olarak çıktı almış oluyoruz. Fonksiyon üzerinde yaptığım işlemleri açıklamaya çalıştım. Akınıza takılan yerleri sorabilirsiniz. Tabi ilk olarak açıklama satırlarını okuyup detaylara ulaşabilirsiniz.
