Javascript (Jquery) ile Json İşlemleri

Bu yazımızda JavasScript üzerinde JSON işlemlerinin nasıl yapıldığına bakacağız. Daha önceki yazılarımızda JSON'un açılımından da anlaşılabileceği gibi JavaScript için çıkarıldığını ancak günümüzde neredeyse tüm programlama dilleri tarafından kullanıldığını belirtmiştik. 

Öncelikle bir kitaba ait bilgileri tutacak değişkenimizi oluşturuyoruz ve isim-değer çiftlerini giriyoruz. 

var kitap= {
    "kitapAdi" : "Türklerin Tarihi",
    "yazar" : "İlber Ortaylı",
    "fiyat" : 22.50,
    "baski" : 17
};

Oluşturduğumuz "kitap" adındaki veriyi JSON formatına çevirmek için JSON sınıfına ait stringify metodunu kullanıyoruz. 

var jsonVeri=JSON.stringify(kitap);

Elde ettiğimiz JSON verisini parse etmemiz yani ayrıştırmamız, parçalamamız gerekiyor. Bu neden JSON sınıfına ait parse metodunu kullanıyoruz.

var veri=JSON.parse(jsonVeri);

Son satırda elde ettiğimiz veri değişkeni üzerinden tüm kitap bilgisine ulaşma imkanımız bulunuyor. Örneğin; kitabın adını alert ile ekrana bastırmak istediğim aşağıdaki şekilde bir yazım kullanıyorum.

alert(veri.kitapAdi);

Başka bir veriye ulaşmaya çalışalım. Diyelim ki oluşturduğum kitaba ait yazar bilgisini ekrana yazdırmak istiyorum. Sadece veri ifadesinden sonra yazdığım "isim" ifadesini değiştirmem yeterli olacaktır.

alert(veri.yazar);

Adım adım yazdığımız kodlarımızı bir araya getirelim. Son yapımız aşağıdaki gibi olacaktır.

var kitap= {
    "kitapAdi" : "Türklerin Tarihi",
    "yazar" : "İlber Ortaylı",
    "fiyat" : 22.50,
    "baski" : 17
};
        
var jsonVeri=JSON.stringify(kitap);
var veri=JSON.parse(jsonVeri);
        
alert(veri.kitapAdi);

Array (Dizi) Yapısında JSON Oluşturma ve Okuma

Gelelim dizi yapısında veri oluşturma işlemine. Yukarıda yaptığımız örnekte sadece bir kitap bilgisi nesne olarak tutuluyordu. Ancak birden fazla kitap bilgisi olduğu zaman ne yapmamız gerekiyor, buna bakalım.

var kitaplar = [
     {
          "kitapAdi" : "Türklerin Tarihi",
          "yazar" : "İlber Ortaylı",
          "fiyat" : 22.50,
          "baski" : 17
     },
     {
          "kitapAdi" : "Gün Olur Asra Bedel",
          "yazar" : "Cengiz Aytmatov",
          "fiyat" : 18.99,
          "baski" : 25
     },
     {
          "kitapAdi" : "Simyacı",
          "yazar" : "Paulo Coelho",
          "fiyat" : 12.75,
          "baski" : 15
    }
];

Oluşturduğumuz kitaplar değişkeninin JSON verisine dönüştürmek için stringify fonksiyonunu kullanıyorum.

var jsonVeri=JSON.stringify(kitaplar);

Elde ettiğim JSON verisini ayrıştırıyorum yani parse ediyorum.

var veri=JSON.parse(jsonVeri);

Az önce tek bir nesne olduğu için veri.kitapAdi şeklinde bir ifade ile bilgilere ulaşmıştım. Ancak bu sefer durum biraz farklı. Çünkü birden fazla veri var elimde ve her bir veriye ulaşmak için dizinin index yani indis numarasını kullanmam gerekiyor. 

Örneğin; 2. veriye ait kitapAdi değerini ekrana yazdırmak istiyorum. Dizilerin index numaraları 0'dan başladığı için bu verinin index numarası 1'dir. O halde veri ifadesinin yanına artık index numarasını da yazmam gerekiyor.

alert(veri[1].kitapAdi);

Başka bir örneğe bakalım; son kitabın fiyat bilgisini alert ile ekrana bastırmak istiyorum. Son elemanın index numarası 2'dir. O halde aşağıdaki bir yazım ifadesinin olması gerekiyor.

alert(veri[2].fiyat);

Tüm elemanlara ait bilgileri elde etmek için ise for, foreach gibi döngüler kullanılabilir. Aşağıdaki örnekte tüm kitapların yazar bilgisini teker teker alert ile ekrana bastıran ifadeyi bulabilirsiniz.

for(var i=0; i<veri.length; i++)
{
    alert(veri[i].yazar);
}

Bu anlatım ve örneklerin yer aldığı eğitimi aşağıdaki videodan takip edebilirsiniz.

Konuyla ilgili görüş, öneri ve sorularını yorum olarak belirtebilirsiniz. Hayırlı çalışmalar dilerim.