PhoneGap ile JSON verisi okuma

28 Nisan 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

PhoneGap ile hazırlanan uygulamalar aynen native uygulamalarda olduğu hem lokal hem de uzak sunucu üzerindeki veri kaynaklarını kullanarak işlem yapabilir. Bu yazıda PhoneGap ile bir JSON verisinin nasıl okunup, ekranda gösterileceğine bir bakalım.

JSON, son yıllarda XML’e göre daha küçük boyutlarda daha fazla veri taşıma özelliği ile oldukça popüler hale geldi. Günümüzde de pek çok uygulamada veri aktarım işlemi için artık XML yerine JSON kullanılıyor. Ben de bu yazıdaki örneğimde uygulamamın içerisinde bulunacak bir JSON dosyasından veri okuyacağım. Tabi bu işlemi her ne kadar lokalde yapıyor olsam da, online bir JSON servisini de aynı kodları kullanarak rahatlıkla gerçekleştirmem mümkün. Öyleyse hemen örneğimize geçelim. Öncelikle aşağıdaki gibi bir JSON dosyası oluşturuyorum.

Kod   
{
    "personel": [
        {
            "id": "1",
            "adsoyad": "Muharrem Taç",
            "gorev": "Yazılım Geliştirici"
        },
        {
            "id": "2",
            "adsoyad": "Furkan Horasan",
            "gorev": "Yazılım Geliştirici"
        },
        {
            "id": "4",
            "adsoyad": "Savaş Doğan",
            "gorev": "Proje Yöneticisi"
        },
        {
            "id": "5",
            "adsoyad": "Erol Dizdar",
            "gorev": "Yayın Yönetmeni"
        },
        {
            "id": "6",
            "adsoyad": "Egemen Mede",
            "gorev": "Yazılım Geliştirici"
        }
    ]
}

Bu dosyayı id, adsoyad ve gorev alanları bulunan “personel” isimli bir tablo olarak düşünebilirsiniz. Küçük bir hatırlatma; hazırladığınız dinamik veya statik JSON dosyasının geçerli bir JSON dosyası olup olmadığını http://jsonlint.com/ adresinden kontrol edebilirsiniz.

Uygulamamın senaryosunu şu şekilde gerçekleştiriyorum. Uygulama içerisine yerleştireceğim bir butona tıkladığımda hazırlayacağım jsonOku() isimli fonksiyonu tetiklemesini, JSON dosyasından okuduğu verileri de “personelBilgiid’li HTML elementinin içerisine yazmasını istiyorum. Bunun için öncelikle HTML kodumu aşağıdaki gibi oluşturmam gerekiyor.

Kod   
<body onload="init();">
  	<button onclick="jsonOku()">JSON Dosyasını Oku!</button>
  	<p id="personelBilgi"></p>
</body>

HTML kısmını hazırladıktan sonra JSON dosyasını okumak için ise JQuery kütüphanesinin $.ajax metodunu kullanacağım. Bunun için jsonOku() isimli fonksiyonumu aşağıdaki gibi hazırlıyorum.

Kod   
function jsonOku(){
        	var veriTopla = "";
        	$.ajax({
        		url: 'personel.json',
        		async: false,
        		dataType: 'json',
        		contentType: "application/json; charset=utf-8",
        		timeout:5000,
        		success: function(JSON) {
        			$.each(JSON.personel, function(i, gelenData){
        				veriTopla = veriTopla + gelenData.adsoyad + "<br />" + gelenData.gorev + "<br /><br />";
        			});
        		},
        		error: function(xmlHttpRequest,textStatus, errorThrown) {
        			alert("Bir hata oluştu! Teknik Bilgi: " + errorThrown + " - " + textStatus);
        		},
        		beforeSend: function (xmlHttpRequest) {
        			xmlHttpRequest.setRequestHeader('Content-Type', 'application/json');
        			xmlHttpRequest.setRequestHeader('Accept', 'application/json');
        		}
        	});
        	document.getElementById("personelBilgi").innerHTML = veriTopla;
        }

Gerekli işlemleri tamamladığıma göre artık uygulamamı çalıştırabilirim. Bunun neticesinde elde edeceğim ekran görüntüleri aşağıdaki gibi oluşacaktır.

 

Bir sonraki yazıda görüşmek üzere..

Uygulamanın örneğini aşağıdaki linkten indirebilirsiniz.

 

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 3 Ağustos 2013 - 02:49

    takip etmek isterim sizi. çok ara vermişsiniz hocam. devam edin bence fırsatınız varsa. çok güzel paylaşımlarınız var. selamlar

  2. :DeliPenguen
    5 Ağustos 2013 - 04:17

    Merhaba Servetç Son bir kaç aydır yoğunluğumdan dolayı bir türlü yazılara devam etme fırsatı bulamadım. İnşallah en kısa zamanda kaldığım yerden hem PhoneGap hem de Google Maps API yazılarına devam edeceğim. Desteğin ve takibin için çok teşekkürler, selamlar.

  3. 13 Ağustos 2013 - 04:04

    Umarım vakit bulursunuz. Selamlar hocam.

  4. 12 Nisan 2015 - 18:36

    Faydalı bilgi. Teşekkürler

  5. anotyper
    27 Şubat 2016 - 15:42

    teşekkürler anlatım için merak ettiğim birşey var json la çekmek bir web sitesinin mobil uygulaması için kullanılabilir diye düşünüyorum ve performans açısından hızlı olacaktırda peki json kullandığımızda siteyegelen mobil trafik görünmeyecek diye düşünüyorum doğrumudur google analytics bağlantısı kurmak mümkün mü? aksi takdirde mobil uygulama yapmak siteye trafiği azaltabilir

  6. 28 Şubat 2016 - 23:11

    Kitaptakinin aynısını copy pate yapcağına bari biraz değitir