Javascript JSON Parsing Örnek 1
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;
<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>
See the Pen Basit Bir JSON Parsing Örneği by Turgut Arslan (@draguth) on CodePen.
Saygılarımla... Turgut Arslan
Yorumlar
Yorum Gönder