JSON Dosyasından Jquery ile Div İçine Veri Çekme – Tasarım Kodlama
JavaScript Jquery

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

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.

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.

Çıktı:

jquery json veri çekme

jquery json veri çekme

 

kisiler.json dosyası içeriği

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

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.

Etiket doldurma: jQuery ile etiketlerin içini doldurmak için birden fazla yöntem olmasına rağmen en kullanışlı yöntem .append(yenietiket) işlevidir. Yukarıdaki oluşturulan p etiketini id değeri #liste olan div içine eklemek için aşağıdaki kodları kullanabiliriz.

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.

 

HTML Kodları tekrardan yazacak olursak son hali şu şekilde olacaktır.

kisiler.json

 

 

 

Yorum bırak