WhoSayIn.com – Hüseyin KELEÅž

Merhaba.

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.