JavaScript Object Notation (JSON), JavaScript nesne sözdizimine dayalı olarak yapılandırılmış verileri temsil etmeye yönelik standart metin tabanlı bir biçimdir. Genellikle web uygulamalarında veri iletmek için kullanılır (örneğin, bir web sayfasında görüntülenebilmesi için sunucudan istemciye bazı verilerin gönderilmesi veya alınması). JSON’u ayrıştırma ve JSON oluşturma dahil olmak üzere JavaScript kullanarak JSON ile çalışmak için ihtiyacınız olan her şeyi bu yazıda sunacağız.
JSON Nedir?
JSON, Üstad Douglas Crockford tarafından popüler hale getirilen JavaScript nesne sözdizimini izleyen metin tabanlı bir veri biçimidir. JavaScript nesnesi değişmez sözdizimine çok benzemesine rağmen, JavaScript’ten bağımsız olarak kullanılabilir ve birçok programlama ortamı JSON okuma (ayrıştırma) ve oluşturma özelliğine sahiptir.
JSON bir dize olarak bulunur – verileri bir ağ üzerinden iletmek istediğinizde kullanışlıdır. Verilere erişmek istediğinizde yerel bir JavaScript nesnesine dönüştürülmesi gerekir. Bu büyük bir sorun değil — JavaScript, ikisi arasında dönüştürme için kullanılabilecek yöntemlere sahip global bir JSON nesnesi sağlar.
JSON yapısı
Yukarıda açıklandığı gibi, JSON, biçimi JavaScript nesne değişmez biçimine çok benzeyen bir dizedir. Dizeler, sayılar, diziler, bool’lar ve diğer nesne değişmezleri gibi standart bir JavaScript nesnesindekiyle aynı temel veri türlerini JSON’a dahil edebilirsiniz.
Bu, aşağıdaki gibi bir veri hiyerarşisi oluşturmanıza olanak tanır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "isim" : "Hayri", "soyisim" : "KOÇ", "yas" : 38, "yazar" : true, "diller" : ["C#","PHP","JavaScript","Python","Java"], "adres" : [ { "il" : "Edirne", "ilce" : "Enez" } ] } |
Bu dizgiyi bir JavaScript programına yüklersek, onu örneğin kisi adlı bir değişkene ayrıştırmak istersek aşağıdaki gibi bir javascript kodu yazabiliriz.
Örneğin:
|
1 2 3 4 |
console.log(kisi.isim); console.log(kisi["isim"]); |
Hiyerarşinin daha aşağısındaki verilere erişmek için gerekli özellik adlarını ve dizi dizinlerini birlikte zincirlemeniz gerekir. Örneğin adres bilgisindeki ilçe verisini almak için aşağıdaki dizilimi kullanmalıyız.
|
1 2 3 |
console.log(kisi.adres[0].ilce); |
Dizi olarak JSON
Yukarıda JSON metninin temelde bir dize içindeki bir JavaScript nesnesine benzediğinden bahsetmiştik. Ayrıca dizileri JSON’a/JSON’dan dönüştürebiliriz. Aşağıda ayrıca geçerli JSON örneğini inceleyelim:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[ { "il":"Edirne", "ilce":"Enez" }, { "il":"Tekirdağ", "ilce":"Süleymanpaşa" } ] |
Yukarıdakiler tamamen geçerli JSON’dur. Dizi öğelerine (ayrıştırılmış sürümünde) bir dizi dizini ile başlayarak erişmeniz yeterlidir.
|
1 2 3 |
console.log(adresler[1].il); |
Diğer notlar
- JSON, yalnızca belirli bir veri biçimine sahip bir dizedir – yalnızca özellikleri içerir, yöntem içermez.
- JSON, dizeler ve özellik adlarının çevresinde çift tırnak işareti kullanılmasını gerektirir. Tek tırnak, JSON dizesinin tamamını çevreleyen dışında geçerli değildir.
- Tek bir yanlış yerleştirilmiş virgül veya iki nokta üst üste işareti bile bir JSON dosyasının yanlış gitmesine ve çalışmamasına neden olabilir. Kullanmaya çalıştığınız tüm verileri doğrulamak için dikkatli olmalısınız (ancak, bilgisayar tarafından oluşturulan JSON’un, üretici programı doğru çalıştığı sürece hata içerme olasılığı daha düşüktür). JSONLint gibi bir uygulama kullanarak JSON’u doğrulayabilirsiniz.
- JSON, yalnızca diziler veya nesneler değil, JSON içine dahil edilmek için geçerli olan herhangi bir veri türü biçimini alabilir. Örneğin, tek bir dize veya sayı geçerli JSON olacaktır.
- Nesne özelliklerinin tırnak içine alınmadığı JavaScript kodundan farklı olarak, JSON’da özellikler olarak yalnızca tırnak içine alınmış dizeler kullanılabilir.
JSON’u alma
JSON almak için iki yöntem kullanbilirsiniz. Birincisi fetch() fonksiyonu ile gelen datayı işleyebilir. Yada XMLHttpRequest nesnesini kullanabilirsiniz.
fetch() kullanarak JSON okuma:
|
1 2 3 4 5 6 7 8 9 10 |
<script> let URL = "veri.json" fetch(URL) .then(response => response.json()) .then(data => console.log(data)) </script> |
XMLHttpRequest kullanarak JSON okuma:
JSON’u elde etmek için XMLHttpRequest (genellikle XHR olarak adlandırılır) adlı bir API kullanıyoruz. Bu, JavaScript aracılığıyla bir sunucudan kaynakları almak için ağ istekleri yapmamıza izin veren çok kullanışlı bir JavaScript nesnesidir (örn. resimler, metin, JSON, hatta HTML parçacıkları), yani tüm içeriği yeniden yüklemek zorunda kalmadan içeriğin küçük bölümlerini güncelleyebileceğimiz anlamına gelir.
veri.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "isim" : "Hayri", "soyisim" : "KOÇ", "yas" : 38, "yazar" : true, "diller" : ["C#","PHP","JavaScript","Python","Java"], "adres" : [ { "il" : "Edirne", "ilce" : "Enez" } ] } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> let requestURL = "veri.json"; let xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status === 200) { //başarılı olursa console.log(xhr.response) //gelenen cevap } else { //başarısız olursa } }; xhr.open('GET', requestURL); //adresi aç xhr.send(); //isteği gönder </script> |
Başlangıç olarak, almak istediğimiz JSON’un URL’sini bir değişkende saklarız.
Bir istek oluşturmak için, new anahtar sözcüğünü kullanarak XMLHttpRequest yapıcısından yeni bir istek nesnesi örneği oluşturmamız gerekir.
Ardından istek türünü giriyoruz.
XML HttpRequest işlemi gerçekleştiğinde gelecek olan verileri yakalamak için onload fonksiyonunu kullanıyoruz. Durum(Status) başarılı ise isteği alıp console ekranında yazdırıyoruz.
xhr sorgusuna URL adresini verip, send metodu ile isteği gönderiyoruz.
3 Yorum