JSON Dosyasından Jquery ile Tablo İçine Veri Çekme

sdkbyrm · 23 Aralık 2020

Asenkron veri çekmek için Jquery kütüphanesi sade ve anlaşılır fonksiyonları sunmaktadır. Bunlardan bir tanesi de $.getJSON() fonksiyonudur. Bu yazıda Jquery getJSON fonksiyonu ile bir JSON nenesini okumayı ve bir tablo içinde yazdırmayı göreceksiniz.

Jquery Element Oluşturma

Öncelikle tablo yapısını anlamak anlamak ve jquery ile table, td ve tr etiketlerini nasıl oluşturacağımızı ve müdahale edeceğimizi öğrenmek gerekiyor. Jquery ile bir element oluşturmak için $(“elementadı”) şeklinde yazmak ve içine veri girmek için de text() fonksiyonunu kullanmak gerekmektedir.

Aşağıdaki gibi bir tablomuz olduğunu düşünelim.

1
2
3
4
5
6
7
8
9

<table id="liste">
<tr>
<th>Sıra</th>
<th>Numara</th>
<th>Ad</th>
</tr>
</div>

Yukarıdaki tablo bir satır içinde üç tane hücre oluşturmak için jquery ile yazmamız gereken kodları şu şekilde olacaktır.

1
2
3
4
5
6
7
8
9
10
11
12

var satir=$("<tr>") //<tr> elementi oluşturur
var hucre1=$("<td>").text("1")
var hucre2=$("<td>").text("120")
var hucre3=$("<td>").text("Ali")

satir.append(hucre1) //hücre1 i satir içine ekler
satir.append(hucre2) //hücre2 yi satir içine ekler
satir.append(hucre3)//hücre3 ü satir içine ekler

$("#liste").append(satir) //liste içine satir elementini ekler.

Ekran görüntüsü şu şekilde oluşacaktır.

Jquery ile veri çekme

Jquery kullanarak veri çekmek için $.getJSON() işevi kullanıldığını yazmıştım. getJSON işlevi kendisine iki tane parametre alır. ilk parametre okunacak json dosyası adı, ikinicisi ile okumadan sonra çalıştırılacak anonim fonksiyondur. Örnek bir okuma işlemi aşağıdaki gibi olacaktır.

1
2
3
4
5

$.getJSON("kisiler.json",function (data){
//işlenecek veriler
})

Butona Tıklayınca JSON Okuma

Şimdi uygulamadaki ana kısıma geldi. Butona tıkladığımızda bir JSON veri çekme işlemi yapmak için HTML belgesine bir tane button ekliyoruz. butonun click() olayına da JSON verilerini okuma işlemini yapıyoruz. Öncelikle bu işlemi yapalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="vericek">
Verileri Çek
</button>
<table id="liste">
<tr>
<th>Sıra</th>
<th>Numara</th>
<th>Ad</th>
</tr>
</div>

<script>

$("#vericek").click(function(){

$.getJSON("kisiler.json",function (data){
//okuma işleminden sonra tabloya doldurma kodları yazılacak
})
})
})

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

forEach ile Dizi Üzerinde Hareket Etme

getJOSN ile okuduğumuz json dosyası dizi şeklinde veri kümesi döndürüyorsa, forEach ile veriler üzerinde aşağıdaki gibi hareket edebiliriz.

1
2
3
4
5
6
7

$.getJSON("kisiler.json",function (data){
data.forEach(function(nesne,index){
//tabloya doldurma işlemi yapılacak
})
})

Tabloya JSON Verilerini Doldurma

Yukarıda Jquery ile satır ve hücre oluşturma kodlarını göstermiştim. Yazının sonundaki JSON dosyasını okuduğumuzda her öğe içinde Numara ve Ad değerleri mevcuttur. Aşağıdaki Kodda olduğu gibi forEach her okuma yaptığında bir satır oluşturup içine 3 tane hücre oluşturup değerleri aktaracağız.

Tüm Kodlar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="vericek">
Verileri Çek
</button>
<table id="liste" border=1>
<tr>
<th>Sıra</th>
<th>Numara</th>
<th>Ad</th>
</tr>
</div>

<script>

$("#vericek").click(function(){

$.getJSON("kisiler.json",function (data){
data.forEach(function(nesne,index){

let satir=$("<tr>") //<tr> elementi oluşturur
let hucre1=$("<td>").text(index)
let hucre2=$("<td>").text(nesne.Numara)
let hucre3=$("<td>").text(nesne.Ad)

satir.append(hucre1) //hücre1 i satir içine ekler
satir.append(hucre2) //hücre2 yi satir içine ekler
satir.append(hucre3)//hücre3 ü satir içine ekler

$("#liste").append(satir) //liste içine satir elementini ekler.

})
})
})

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

kisiler.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

[
{
"Numara": "Neslinur",
"Ad": "9203"
},
{
"Numara": "Sebükalp",
"Ad": "4523"
},
{
"Numara": "Hoşnigar",
"Ad": "8308"
},
{
"Numara": "Hay",
"Ad": "3470"
},
{
"Numara": "Uzbay",
"Ad": "9602"
},
{
"Numara": "Altın",
"Ad": "1111"
},
{
"Numara": "Köker",
"Ad": "9922"
}
]

JSON Dosyasından Jquery ile Tablo İçine Veri Çekme

sdkbyrm

Jquery Element Oluşturma​

Jquery ile veri çekme​

Butona Tıklayınca JSON Okuma​

forEach ile Dizi Üzerinde Hareket Etme​

Tabloya JSON Verilerini Doldurma​

Jquery Element Oluşturma

Jquery ile veri çekme

Butona Tıklayınca JSON Okuma

forEach ile Dizi Üzerinde Hareket Etme

Tabloya JSON Verilerini Doldurma