Günümüzde web sayfalarının kullanıcı etkileşimi ve veri bağımlılıkları çok fazladır. Büyük veriler ile işlem yapmaya kalktığımızda arkaplanda veri alma işlemi yapmıyorsanız sayfaların yüklenme hızları belirgin şekilde düşmektedir.
Bakınız: JSON Nedir? Nasıl Kullanılır?
Bu yazıda bir JSON veri kümesini arkaplanda okuyup bir DIV etiketi içinde listeyeceğiz. Verilerin okunmasında jQuery ve JavaScript kütüphaneleri ortak şekilde kullanılacaktır.
Uygulamadaki kodları açıklamaya geçmeden önce uygulama kodlarını ve örnek ekran çıktısını görelim.
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 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TasarimKodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button id="vericek"> Verileri Çek </button> <div id="liste"> <!-- veriler bu bölümde olacak--> </div> <script> $("#vericek").click(function(){ $("#liste").html('') $.getJSON("kisiler.json",function (data){ data.forEach(function(nesne,index){ var kayit=$('<h3>').text(nesne.Numara+" "+nesne.Ad); $("#liste").append(kayit); }) }) }) </script> </body> </html> |
Çıktı:
kisiler.json dosyası içeriği
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" } ] |
Jquery Veri Çekme
Jquery dahil etme
Jquery kütüphanesini kullanmak için öncelikle jQuery sitesinden kütüphaneyi indiriyoruz. Ardından </body> etiketinden hemen önce <script></script> etiketlerini yazıyoruz. script etikteleri bizim veri çekme kodlarımızı içerecek bölümü oluşturuyor. Aşağıdaki gibi bir görüntü elde etmeniz gerkiyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="tr"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <!--HTML KODLARI--> <script> /*JavaScript Kodları*/ </script> </body> </html> |
Bakınız: 10 Dakikada JSON Öğren
HTML Kodlarını yazma
İskeleti oluşturduktan sonra artık verileri çekmek için kullanacağımız button etiketi ve listelemek için kullacağımız div etiketini yazmaya geldi. Aşağıdaki gibi HTML etitketlerini BODY içine yazıyoruz.
1 2 3 4 5 6 7 8 | <button id="vericek"> Verileri Çek </button> <div id="liste"> <!-- veriler bu bölümde olacak--> </div> |
Jquery butona tıklama
Butona tıklama işlemi öncelikle id değeri ile butonu seçiyoruz. Ardından da click() fonksiyonu ile butona tıklıyoruz. Script etiketi içinde aşağıdaki gibi tıklama olayını yazıyoruz.
1 2 3 4 5 6 7 | <script> $("#vericek").click(function(){ //buton tıkladığında buradaki kodlar çalışır }) </script> |
Jquery ile JSON dosyasını okuma
$.getJSON işlevi kendisine parametre olarak gösterilen JSON dosyasını okuyup yine kendisine parametre olarak gösterilen fonksiyona bir data ile gönderir. Temel kullanımı şu şekildedir.
$.getJSON( “jsondosyası”,fonksiyon)
Aşağıdaki kod ile aynı dizindeki kisiler.json dosyasını okuyup anonim bir fonksiyon çalıştırdık.
1 2 3 4 5 | $.getJSON("kisiler.json",function (data){ //gelen data nesnesi bu bölümde işlenecek }) |
Bakınız: 10 Dakikada JSON Öğren
Buton ile JSON okuma
Buton tıklandığında JSON dosyasını okumak için yukarıdaki iki kodu aşağıdaki gibi birleştirmek gerekiyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> $("#vericek").click(function(){ $.getJSON("kisiler.json",function (data){ //data nesnesi burada işlenecek }) }) }) </script> |
JavaScript forEach fonksiyonu kullanımı
Bir dizideki verileri okumak için javascript bize foreach işlevini sağlar. forEach fonksiyonunu kullanarak dizi elemanları üzerinde rahatlıkla okuma yapabiliriz.
Aşağıdaki örnek kullanımda butona tıklandığında okunan json verisi bir json dizisi(data adında) göndermektedir. data nesnesi üzerindeki her bir öğe için forEach içindeki anonim işlev çalıştırılmaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> $("#vericek").click(function(){ $("#liste").html('') //liste elmentinin içini temizler $.getJSON("kisiler.json",function (data){ data.forEach(function(nesne,index){ //her bir data nesnesi için bu fonksiyon çalıştırılır. }) }) }) </script> |
Jquery element oluşturma / element doldurma / element temizleme
Etiket temizleme: Jqueryde bir etiketin içini temizlemek için .html() işlevini kullanabilirsiniz. html() işlevine gönderdiğiniz parametre ile etiketin için yeniden doldurulur. Eğer .html(”) şeklinde yaparsanız bu seferde etiket içini temizlemiş olursunuz.
Aşağıdaki örnekte div etiketi butona her tıklandığında temizlenmektedir.
1 2 3 4 5 6 7 | <script> $("#vericek").click(function(){ $("#liste").html('') }) </script> |
Etiket Oluşturma: jquery ile etiket oluşturmak için html yapısına benzer bir kullanım söz konusudur. Örneğin p etiketi oluşturmak istiyorsanız. $(‘<p>’) yapmanız yeterli olacaktır. Yine aynı şekilde bir div oluşturmak isterseniz de $(‘<div>’) yapmanız gerekecektir.
Aşağıdaki örnekte bir tane p etiketi oluşturulup içine tasarimkodlama.com yazısı yazdırılmaktadır.
1 2 3 | $('<p>').text('tasarimkodlama.com') |
1 2 3 4 | let kayit=$('<p>').text('tasarimkodlama.com'); $("#liste").append(kayit); |
Butona tıklayınca div içine json datasını yükleme
Yukarıdaki açıklamalardan hareketle butona tıklayınca div içine h3 etiketi ile veri çekmek için aşağıdaki kodları kullanabiliriz. nesne.Numara ve nesne.Ad json dosyasındaki objelerin özellik adıdır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> $("#vericek").click(function(){ $("#liste").html('') $.getJSON("kisiler.json",function (data){ data.forEach(function(nesne,index){ var kayit=$('<h3>').text(nesne.Numara+" "+nesne.Ad); $("#liste").append(kayit); }) }) }) </script> |
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 | <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> <div id="liste"> <!-- veriler bu bölümde olacak--> </div> <script> $("#vericek").click(function(){ $("#liste").html('') $.getJSON("kisiler.json",function (data){ data.forEach(function(nesne,index){ var kayit=$('<h3>').text(nesne.Numara+" "+nesne.Ad); $("#liste").append(kayit); }) }) }) </script> </body> </html> |
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" } ] |
hocam sadece inputa girelen veriyi sorgulayabilirmiyiz varsa var yoksa yok dese