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" } ] |
let hucre2=$(“”).text(nesne.Numara) bu komuta nasıl whatsaap yönlendirme linki ekleye bilirim?