Javascript JSON Kullanımı
Hepinize merhaba dostlarım 😊. Bu yazımda sizlere daha önce PHP programlama dili üzerinde anlattığım (okumayan dostlarım varsa buradan ulaşabilir) konu olan ve hemen hemen her programlama dilinde de (eğer uğraşıyorsak) karşımıza çıkan, API yazımında neredeyse vazgeçilmez olan yapıdan yani yapıyı yani JSON yapısını ve kullanımını Javascript programlama dili üzerinde anlatacağım 😊. Aklınızdan şu soru geçiyordur
Hocam sadece bir programlama dili için geçerli değil mi ?
cevabım "Değil 😊" olacaktır dostlarım. Neden diye merak ediyorsanız bunu JSON Nedir ? başlığı altında anlatayım 😊
JSON Nedir ?
Dostlarım JSON a bakacak olursak Javascript Object Notation kelimesinin harflerinden oluşmuş, tek bir programlama dili için değil global olarak hemen hemen her programlama dilinde kullanılan ve veri işlememizde çoğu zaman oldukça fayda sağlayan (örneğin bir input dizisinden gelen verileri json formatında alıp bir string veri gibi saklama durumlarında çok büyük fayda sağlar), özellikle RESTful API ile uğraşırken verilerimizin global bir yapıda(yani diğer programlama dillerinde de anlaşılabilir olarak belirli bir yapı kullanmak) algılamak ve işlemek gerektiği durumlarda JSON veri tipi kullanılır. Kullanımı ve anlaşılması kolay olan bu yapıyı anlamak gayet basittir dostlarım 😊. Neden kullanıldığı yapısına gelecek olursak dostlarım işlenmesi, parçalanması ve anlaşılması basit bir yapı olduğu için ve aynı zamanda global bir veri tipi olduğu için (yukarıda da bahsettiğim gibi) çok sık tercih edilir 😊. Bu kısma kadar anladığımıza göre ve aklımızda herhangi bir soru işareti kalmadığına göre gelelim yavaş yavaş konumuza girişimizi yapalım.
JSON Veri Türü Özellikleri
Ve geldik dostlarım JSON veri türü özelliklerine 😊. JSON veri türüne bakacak olursak dostlarım aynı javascript programlama dilinde oluşturduğumuz object veri tipi gibi süslü parantezler içerisinde key value ikilisi şeklinde kullanılır 😊. Yalnız burada önemli noktaya değinecek olursak object içerisinde key kısımları normal şekilde ama value kısımları tırnak içerisinde veriliyor ya işte json veri tipinde hem key hem de value kısımları tırnak içerisinde belirtilir. Gelin örnek bir json verisi oluşturalım 😊
{ "marka":"Volkswagen","model":"Polo" }
şeklinde bir json verisi oluşturduk dostlarım 😊. Gördüğünüz gibi hiçbir şekilde bir zorluğu yok aynı object veri tipi gibi tanımladık lakin key kısımlarını tırnak içerisine yazdık 😊. Bütün işlem bu kadar basit dostlarım 😊. Bu kısma kadar anlamış isek dostlarım şimdi gelelim JSON Nesne türüne 😊
JSON Nesne Oluşturma
Ve geldik dostlarım özellikle bir web projesi geliştirirken (Özellikle MVC framework kullanırken çok sık karşılaşılan bir işlemdir 😊) ajax ile veri gönderdiğimiz durumlarda gelen veriyi de json a dönüştürüp almamız gerektiğinde console kısmında bize JSON tipinde bir nesne döner. Bu nesne yorumlanabilir ve açıklanabilir. İşlenmesi de kolaydır 😊. Örnek olarak mesela kullanıcılar ile ilgili bir sistem yazdığımızı düşünelim ve tek kullanıcıyı çağırdığımız durum olsun. Karşımıza aşağıdaki şekildeki gibi bir çıktı gelecektir
{
"ad":"MFSoftware",
"soyad":"Blog",
"yasi":21,
}şeklinde bir kayıt döner 😊. Gördüğünüz gibi dostlarım gelen sonuç karmaşık değil, anlaşılması ve okunması gayet basit 😊. İşlenmesi de bir o kadar basit 😊. Bu kısma kadar herhangi bir aksaklığımız yoksa gelelim JSON Dizi türüne
JSON Dizi Oluşturma
Veee geldik JSON Dizi oluştıurma işlemimize dostlarım 😊. Bazen JSON Nesne türünde tek bir veri tutma durumumuz olmauyabilir. Örnek vermemiz gerekirse bir yazılım yapmış olalım ve bu yazılımımız da araç galerisi yazılımı olsun. Ne olur bu yazılımda gelin bir düşünelim. Araçların markası, modeli, rengi, motor tipi, yaşı vb. Durumlar olabilir. Pekiiii bu araçlar bir tane mi olur diye bakacak olursak hayır bir tane olmaz 5 tane de olabilir 10 tane de olabilir 😉. İşte bunu da JSON tipi ile tutacak olursak her bir arabamız için içerisinde bir obje tutmamız gerekecektir 😊. Gelin buna da bir göz atalım 😊
"araclar":[
{"marka":"Volkswagen", "model":"Polo", "renk":"Beyaz", "motor":1.6, "yas":5},
{"marka":"Porsche", "model":"Panamera", "renk":"Kırmızı", "motor":3.6, "yas":4},
{"marka":"Volvo", "model":"S40", "renk":"Siyah", "motor":1.6, "yas":3},
{"marka":"Seat", "model":"Leon", "renk":"Turuncu", "motor":1.6, "yas":6},
]şeklinde birden fazla aracımızın olduğunu düşünürsek tutacağımız JSON verisini JSON Array olarak tutmamız gerekecektir 😊. Bu kısma kadar her şey tamam ise dostlarım artık yavaştan kodlamamıza geçişimizi yapalım 😊
JSON Formatına Çevirme
İşte geldik en önemli kısımlara dostlarım 😊. Özellikle bir web geliştirici iseniz bu işlem gelecek eninde sonunda sizi bulacaktır 😊. Konumuza gelecek olursak dostlarım bir objeyi JSON formatına çevirmemiz için gerekli olacak kod parçası JSON.stringfy() komutudur. Yani burada diyoruz ki: "Kardeşim sen içerine aldığın herhangi veriyi (biz bu örneğimizde dizi tercih ettik 😊) JSON türüne çevir 😊" şeklinde komutumuzu belirtmiş olduk 😊. İşte bu kısımda dostlarım kodumuz bizim için çalışıyor ve içerisine koyduğumuz obje veya artık siz hangi veri türünü atmışsanız bunu alıyor ve ekrana JSON türünde bastırıyor 😊. Gelin bir örnekle bunu inceleyelim
var cars = [
{marka:"Volkswagen", model:"Polo", renk:"Beyaz", motor:1.6, yas:5},
{marka:"Porsche", model:"Panamera", renk:"Kırmızı", motor:3.6, yas:4},
{marka:"Volvo", model:"S40", renk:"Siyah", motor:1.6, yas:3},
{marka:"Seat", model:"Leon", renk:"Turuncu", motor:1.6, yas:6},
];
var sonuc = JSON.stringify(cars);
alert(sonuc);
/*
Ekran Çıktısı
[{"marka":"Volkswagen","model":"Polo","renk":"Beyaz","motor":1.6,"yas":5},{"marka":"Porsche","model":"Panamera","renk":"Kırmızı","motor":3.6,"yas":4},
{"marka":"Volvo","model":"S40","renk":"Siyah","motor":1.6,"yas":3},{"marka":"Seat","model":"Leon","renk":"Turuncu","motor":1.6,"yas":6}]
*/şeklinde kodlarımızı yazdık dostlarım. Burada süreç nasıl işledi diye merak ediyorsanız dostlarım gelin size bunu hızlıca anlatayım 😊.
- Bir dizi oluşturduk ve objelerimizi bu dizimizin içerisine aktardık
- Sonrasında ise JSON.stringify() komutunu kullanarak bu objemizi bir JSON metnine çevirdik 😊.
- JSON metnini bir değişkene aktardık ve bunu ekranımıza bastırdık 😊
şeklinde sürecimiz rahat rahat işledi dostlarım 😊. Şimdi sizin aklınızda olan ve sizi korkutan ufak sorular vardır ben seziyorum ki benim de JSON türü ile çalışmaya başladığım ilk zamanlar kafamı karıştıran bir soruydu bu 😊. Şimdi sorunuza bakacak olursak:
Hocam JSON metnine elimizdeki diziyi çevirdik çok güzel oldu da verilerimiz karmaşıklaştı gibi oldu bunu nasıl çözeriz ?
öncelikle öğrenme heyecanınız için sizleri tebrik ediyorum dostlarım 😊. Bu denli öğrenme heyecanınızın olması sizleri her zaman bir adım daha ileri taşıyor 😊. Şimdi sizin sorunuzu cevaplamaya gelecek olursak bunun için de bir Javascript kodumuz var 😊. Onu da hemen şu an göreceğiz ve işlemlerin ne kadar basit olduğunu anlayacaksınız 😊.
Javascript Objesine Çevirme
Vee geldik aklınızdaki sorunun çözüm noktasına. Evet farkındayım ve ilk zamanlar JSON türünü Javascript objesine çevirme işlemi biraz baş ağrıtıcı olabiliyor. Özellikle de ilk defa JSON tipi ile uğraşıyorsanız bu bayağı zorlayacaktır 😊. Şimdi gelelim bu ilk zamanlarda zorlayıcı olan sürecimizi nasıl tek bir kodla yerle bir ederiz buna bakalım 😊.
Dostlarım elimizdeki JSON objesini Javascript nesnesine çevirmek için kullanacağımız kod parçası JSON.parse() komutumuzdur. Bu komut ile uygulamamıza diyoruz ki: "Dostum sen bizim gönderdiğimiz JSON metnini biz obje haline getiriver sana zahmet 😊". Kodumuz da tabi bizi kırmıyor ve hızlıca bunu düzenliyor. Gelin bunu yukarıdaki örnekte JSON metnine çevirdiğimiz ve bize geri dönen sonucu alıp işlemi gerçekleştirelim. Gelelim kod ekranımıza ve
var sonuc = '[{"marka":"Volkswagen","model":"Polo","renk":"Beyaz","motor":1.6,"yas":5},{"marka":"Porsche","model":"Panamera","renk":"Kırmızı","motor":3.6,"yas":4},{"marka":"Volvo","model":"S40","renk":"Siyah","motor":1.6,"yas":3},{"marka":"Seat","model":"Leon","renk":"Turuncu","motor":1.6,"yas":6}]';
var eski_hal = JSON.parse(sonuc);
console.log("Arabalalarımız")
eski_hal.forEach(item =>{
console.log("Marka: "+item.marka+", Model: "+item.model+", Renk: "+item.renk+", Motor: "+item.motor+", Yaş: "+item.yas);
})
/*
Ekran Çıktısı:
Arabalalarımız
Marka: Volkswagen, Model: Polo, Renk: Beyaz, Motor: 1.6, Yaş: 5
Marka: Porsche, Model: Panamera, Renk: Kırmızı, Motor: 3.6, Yaş: 4
Marka: Volvo, Model: S40, Renk: Siyah, Motor: 1.6, Yaş: 3
Marka: Seat, Model: Leon, Renk: Turuncu, Motor: 1.6, Yaş: 6
*/şeklinde olacaktır. Şimdi burada süreç nasıl işledi gelin onu inceleyelim dostlarım 😊
- İlk olarak bir JSON metni oluşturduk
- Daha sonrasında ise bunu JSON.parse() fonksiyonuyla bir objeye dönüştürdük ve sonucu eski_hal isimli değişkenimize aktardık
- Ekranımıza bastırmadan önce console.log('Arabalarımız') şeklinde kod oluşturduk ve listemizin başında Arabalarımız yazmasını istedik
- Daha sonra ise gelen verimizi forEach() döngüsü ile teker teker döndük 😊.
şeklinde sürecimiz işledi ve kodda gösterdiğim gibi çıktı rahatlıkla ekranımıza bastırıldı 😊. Bütün işlemlerimiz bu kadar basit dostlarım 😊. Gördüğünüz gibi hiç zor yanı yok
Eveeeet dostlarım 😊. Bu yazımda sizlere JSON Nedir, Neden Kullanılır, JSON dan objeye çevirme, Objeden JSON a çevirme gibi konuları Javascript programlama dilinde elimden geldiğince anlatmaya çalıştım. Umarım faydalı olmuşumdur 😊. Eksik veya hatalı bilgi aktarımı yapmış isem benimle iletişime geçmekten çekinmeyin 😊. Başlarda biraz karmaşık veya zor bir konu olarak gözükebilir dostlarım anlıyorum. Bu aşamada yapmanız gereken şey her yazımın altında da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır 😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer
Savaş Atay
29.05.2022json = [ {"isim":"a","filmler":"Aksiyon"}, {"isim":"b","filmler":"Animasyon,Komedi"}, {"isim":"c", "filmler":"Aksiyon,Savaş"}, {"isim":"d", "filmler":"Komedi"} ] Buradaki sadece aksiyon dizilerinin index değerini nasıl alabilirim?