jQuery ile JSON Kullanımı

Salı, 05 Eki 2010 yorum ekle yorumlara git

JSONMerhaba.

Günümüzde artık pek çok site API desteği veriyor ve çoğu web sitesi API‘den dönen sonucu JSON olarak döndürüyor. Daha önce blogumda JSON’ın PHP ile kullanımından bahsetmiştim, bu yazımda da JSON‘ın JavaScript dilinde jQuery kütüphanesi ile birlikte nasıl kullanılacağından bahsedeceğim.

Yazıyı 2 kısımda ele almaya çalışacağım. İlk kısımda JSON‘ı jQuery yardımıyla nasıl parse edeceğimizden bahsedeceğim. İkinci kısımda ise Ajax ile Google Ajax Search API‘ya bağlanıp dönen veriyi işleyeceğim. Önceki yazımı okuduğunuzu varsayarak direkt olaya giriyorum.

$.parseJSON Metodu ve Kullanımı

{"kisi 1":{"Ad":"Huseyin","Soyad":"KELES","Dogum":1990},
"kisi 2":{"Ad":"Ali","Soyad":"Veli","Dogum":1995}}

Yukarıdaki JSON‘ı jQuery‘nin parseJSON metoduyla işlemek çok basit. parseJSON metodu yalnızca bir parametre alıyor, o da tahmin edebileceğiniz gibi JSON verisinin olduğu parametre.Hemen basit bir uygulama yapalım;

    var json = '{"kisi 1":{"Ad":"Huseyin","Soyad":"KELES","Dogum":1990},"kisi 2":{"Ad":"Ali","Soyad":"Veli","Dogum":1995}}';
    var sonuc = $.parseJSON(json);

Yukarıdaki kod bloğunda json adlı değişkendeki veriyi jQuery‘nin parseJSON metodu ile işleyip sonuc adlı değişkene aktardık. Şimdi artık sonuc adlı değişken ile istediğimizi yapabiliriz. Ben basit bir şekilde listelemek istiyorum.

    $.each(sonuc, function(k, kisi){
        $.each(kisi, function(a, b){
            $('#parsejson').append(a + ' : ' + b + '<br />');
        });
        $('#parsejson').append('<hr />')
    });

Yukarıdaki kodu açıklayalım, burada JSON‘ımızı 2 kişilik bir kişi veri tabanı olarak düşünebiliriz. Yaptığımız şey tam olarak parseJSON metoduyla JSON‘ı bir JavaScript Object‘e dönüştürmek ve ardından 2 adet iç içe each döngüsüyle kişileri parsejson idli elemente basmak. İlk döngüde kisi 1 ve kisi 2 ye ulaşıyoruz, alt döngüde ise bu kişilerin sahip olduğu özniteliklere (Ad, Soyad ve Dogum) ulaşıyoruz ve az önce de dediğim gibi parsejson idli elemente yazdırıyoruz.

parseJSON metoduyla işimiz şimdilik bu kadar.

$.getJSON() Metodu ve Kullanımı

Şimdilik de Google Ajax Search API‘ye bağlanıp basit bir arama yapalım ve verileri çekelim, ardından uygun bir şekilde listeleyelim. Google Ajax Search API ile arama yaparken kullanacağımız link yapısı şöyle;

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=aranan

Hemen Google’da huseyin keles aramasını yapacak JavaScript kodumuzu yazalım;

    $.getJSON('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=huseyin%20keles&callback=?', function(data){
        sonuclar    = data.responseData.results;
        toplam        = sonuclar.length;

        for (i=0; i<toplam; i++){
            s    = sonuclar[i];
            $('#getjson').append('<h3>' + s.title + '</h3>' +
                                s.content + '<br />' +
                                '<i><a href="' + s.url + '">' + s.url + '</a></i> <hr />'
                                );
        }
    })

URL’nin sonuna eklediğimiz &callback=? metnine dikkat edin. jQuery ? karakterini bizim callback fonksiyonumuzun ismiyle değiştiriyor. Bu şekilde yabancı bir domain üzerinden sorgulama yapabiliyoruz, aksi takdirde ajax sorgusu başarısız sonuçlanacaktı.

Yukarıdaki kodumuzda dönen JSON verisi çözülerek data adlı değişkene atanıyor. Daha sonra sonuclar adlı değişkende arama sonuçlarına erişiyoruz. Ve ardından, sizin de anlayacağınız gibi basit bir for döngüsü yardımıyla dönen verileri ekrana basıyoruz.

Yazıdaki örneklerde jQuery‘nin çok kullanınşlı bir template sınıfı olan tmpl plugin’ini kullanacaktım fakat daha sonra bu template plugin’ini ayrı bir yazıda ele almayı uygun gördüm.

Şimdilik bu kadar, yazıda oluşturduğumuz jQuery JSON kullanımı örneğine buradan ulaşabilirsiniz.


Paylaş:
  • Facebook
  • FriendFeed
  • Twitter
  • del.icio.us
  • Digg
  • StumbleUpon
  • Technorati
  • LinkedIn
  • MySpace
  • BlinkList
  • Reddit
  • RSS
  • email
  • PDF

Benzer Yazılar (bunları bilgisayar seçiyor);

Categories: JavaScript, Programlama, jQuery 5.450 Gösterim
  1. şimdilik yorum yok.
  1. şimdilik geri bağlantı yok