Java Script İle JSON Data Çekme

Bu yazımda sizlere kendi oluşturduğumuz JSON data dosyasını Java Script ile nasıl çekebileceğimizi metodunu anlatacağım.

Bu makalede bir html dosyası oluşturacağız ve içerisine label ekleyeceğiz. Eklediğimiz bu labellara daha önceden oluşturduğumuz rehber.JSON datasında dataları çekerek yükleyeceğiz.

Haydi Başlayalım…

Java Script ile JSON datası çekebilmek için öncelikli olarak JQuery API’sine ihtiyacınız vardır. Bu nedenle jquery-2.1.4.min.js Api’sini projenize eklemeniz lazımdır.

(Bu Api’yi şu linkten https://code.jquery.com/jquery/ indirebilirsiniz. Ben ayrıca java dosyası olarak makale sonunda ki proje dosyasını indirirseniz ekli olarak vereceğim.)

<html lang="en">
<head>
    <title>JSON Data Cekme</title>
</head>
<body onload="JSONCEK()">

    <label id="lbl_ID"></label><br />
    <label id="lbl_Ad"></label><br />
    <label id="lbl_SoyAd"></label><br />
    <label id="lbl_Tel"></label><br />
    <label id="lbl_Mail"></label><br />

<!-- Gerekli JQuery Api sini sisteme ekliyoruz. -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<script>
    <!-- Fonksiyonumuzda kullanmak üzere gerekli değişkenleri oluşturuyoruz. -->
    var _id; var _adi; var _soyadi; var _telefon; var _email;

    // JSON çek adında bir method oluşturuyoruz. Bu methodumuzu sayfa yüklendiğinde çağırmak için sitemizin body kısmının onload'ına tanımlıyoruz. <body onload="JSONCEK()">
    function JSONCEK() {

        //getJSON Methodunu kullanarak verimizi çekiyoruz. GetJSON methodu bizden datamızın adresini isteyecektir. Bu method vermiş olduğumuz adresden datayı çekerek fonksiyon olarak tanımladığımız data dizinine atar.
        $.getJSON("data/rehber.json", function (data) {

            //Şimdi JSON datalarımızı atamış olduğumuz data fonksiyonun içerisinde for döngüsü ile dönerek tüm datalara ulaşabilirsiniz. 
            //data.length() metodu ile gelen datanın length kadar dönebilir veya benim gibi datayı siz oluşturduğunuz için direk sayı yazabilirsiniz.
            for (var i = 0; i < 3; i++) {

                //Tüm değerleri sırasıyla belirlediğim değişkene atıyorum.
                //Data yı değişkene atama esnasında değişken fonksiyonu sizden 3 şey ister 1) JSON Listenizin adı ["Rehberim"] 2) Atamak istediğiniz JSON dizinin numarası [i] 3) Atamak istediğiniz datanın adı ['ID']
                _id = data["Rehberim"][i]['ID'];
                _adi = data["Rehberim"][i]['Adi'];
                _soyadi = data["Rehberim"][i]['Soyadi'];
                _telefon = data["Rehberim"][i]['Telefon'];
                _email = data["Rehberim"][i]['Email'];

                //Burdan sonrası sizin yapmayı planladığınız programa göre değişir ben atadım en son JSON datalarını Label'a yazdırarak programımı tamamlıyorum.
                document.getElementById('lbl_ID').innerHTML = _id;
                document.getElementById('lbl_Ad').innerHTML = _adi;
                document.getElementById('lbl_SoyAd').innerHTML = _soyadi;
                document.getElementById('lbl_Tel').innerHTML = _telefon;
                document.getElementById('lbl_Mail').innerHTML = _email;
           }
        });
    }
</script>
</body>
</html>

*Not: Projeyi normal bir şekilde çalıştırdığınız zaman size veri getirmiyecektir. Bunun sebebi programın hatalı olması değildir. eklediğimiz api server üzerinden yanıt vermektedir. Bu nedenle programı ya hostinge atarak yada sanal bir dizin içinde deneyiniz. 

Oluşturduğumu projeyi indirmek için tıklayınız: demo

Bir Cevap Yazın