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

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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.

Screenshot_1.png




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"
}
]
 
Üst Alt