JSON Dosyasından Jquery ile Tablo İçine Veri Çekme – Web Tasarım & Programlama
Javascript Jquery

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

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.

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.

 

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.

 

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.

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.

 

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

kisiler.json

 

 

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box