JSON Nedir ? Nasıl Kullanılır ?
Merhaba Arkadaşlar,
Bu makalede anlık veri alışverişinin yoğun olduğu veya arayüz tarafında kod tekrarının çok olmaması için sayfa yüklenirken veri çekme işlemlerinin yapıldığı projelerde kullanılan JSON’ın kullanım şekillerini göreceğiz. Açılımı “Javascript Object Notation” olan JSON’ı Xml’in rakibi olarak da düşünebiliriz. Xml’e alternatif olarak çıkarılmakla birlikte yazım şekli olarak bir javascript parçası olduğu için Xml’e göre daha hızlı çalışan bir yapısı bulunuyor. Ayrıca değişken tanımlama biçimlerinde ki farklılıklar sebebiyle dosya boyutu olarak da Xml’den daha düşük boyutlarda çıktılar vermektedir.
Farklılığın görülebilmesi için basit bir örnek yapalım. Öğrenci araç gereçleri ile ilgili bir xml ve json sayfaları oluşturalım.
XML:
<ogrenci> <arac> <adi>kalem</adi> <fiyati>2 TL</fiyati> </arac> <arac> <adi>silgi</adi> <fiyati>1 TL</fiyati> </arac> <arac> <adi>silgi</adi> <fiyati>1 TL</fiyati> </arac> <arac> <adi>defter</adi> <fiyati>4 TL</fiyati> </arac> </ogrenci>
JSON:
{
"ogrenci":[
{
"adi":"kalem",
"fiyati":"2 TL"
},
{
"adi":"silgi",
"fiyati":"1 TL"
},
{
"adi":"defter",
"fiyati":"4 TL"
}
]
}
Gördüğünüz gibi hiç etiket açıp kapama işlemi olmadan XML sayfası ile aynı içeriğe sahip bir JSON sayfası oluşturduk. Ve yazım biçimine baktığımızda daha az kod yazdık.
Şimdi daha somut örnekler ile JSON’ın kullanım şeklini daha iyi anlayabiliriz. Bu makalede yapacağımız örneklerde getJSON ve AJAX ile konsola veri yazdırma, kelimeye göre veri çekme, karaktere göre veri çekme ve jqueryui’ın autocomplete özelliğine benzer biçimde input’un altına fixed olarak bir liste açarak verileri listelemeyi göreceğiz.
İlk olarak tüm örneklerde kullanacağımız “data.js” sayfasını oluşturalım. Bu sayfayı oluştururken de bir oto galerisi için proje hazırladığımızı düşünerek o an galeride bulunan bir listesini hazırlayalım. Marka, model, renk, plaka değerlerini listeye yazdıracağız. Plakayı yazdırırken de birbirinden bağımsız olarak 3 katmana göre arama yaptırılabileceğini düşünerek listeyi böleceğiz. Data.js sayfasının kodları şu şekilde olacaktır:
{
"cars":
[
{
"brand" : "WOLKSVAGEN",
"model" : "GOLF",
"color" : "red",
"plate" : {
"cityNumber" : "34",
"plateText" : "ASD",
"plateNumber" : "199"
}
},
{
"brand" : "OPEL",
"model" : "ASTRA",
"color" : "white",
"plate" : {
"cityNumber" : "22",
"plateText" : "OPL",
"plateNumber" : "88"
}
},
{
"brand" : "RENAULT",
"model" : "MEGANE",
"color" : "blue",
"plate" : {
"cityNumber" : "58",
"plateText" : "TRE",
"plateNumber" : "58"
}
},
{
"brand" : "WOLKSVAGEN",
"model" : "PASSAT",
"color" : "black",
"plate" : {
"cityNumber" : "35",
"plateText" : "NMR",
"plateNumber" : "10"
}
},
{
"brand" : "RENAULT",
"model" : "CLIO",
"color" : "white",
"plate" : {
"cityNumber" : "34",
"plateText" : "ALD",
"plateNumber" : "30"
}
}
]
}
Verilerimizi tuttuğumuz sayfa artık hazır olduğuna göre uygulamalarımızı hazırlayabiliriz. İlk uygulamada Json’ın en basit anlamda kullanım şeklini göreceğiz. “getJSON” ile data.js içerisinde ki tüm verileri alıp konsola yazdıracağız. console-getJSON.html isimli bir sayfa oluşturalım ve kodlarını şu şekilde hazırlayalım:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - JSON Nedir ? Nasıl Kullanılır ?</title>
</head>
<body>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$.getJSON('data.js', function(data) {
console.log(data);
});
</script>
</html>
Sayfayı çalıştırdıktan sonra konsolu kontrol ettiğimizde bir “Object” nesnesinin içerisinde data.js içerisinde ki verilerin yazıldığını görebiliriz. Json’ın yapılan büyük/küçük uygulamarında temel kullanım şekli böyledir. getJSON metodunun içerisinde ilk olarak verileri data.js içerisinden çağırdığımızı belirtiyoruz. Daha sonra bununla ilgili bir fonksiyon oluşturuyoruz ve fonksiyona “data” isimli bir parametre gönderiyoruz. Bu parametre, data.js sayfasındaki tüm değerleri içerisinde taşıyarak fonksiyonda işlem yapmamızı sağlıyor. Fonksiyon içerisinde ki satırda da gelen tüm değerleri konsola yazdırıyoruz.
Json’ın tek kullanım getJSON değildir. Ajax ile de Json verilerini okutup aynı işlemleri yaptırabiliriz. Aynı şekilde verileri konsola yazdırmak istiyorsak script tag’leri arasında ki getJSON ile kullandığımız kodları şu şekilde değiştirmemiz gerekmektedir:
$.ajax({
url: 'data.js',
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
}
});
Yapacağımız sıradaki uygulamada data.js sayfası içerisinde ki tüm verileri bir ul li yapısı içerisinde sayfaya yazdıracağız. Bunun için ilk olarak list.html isimli bir sayfa oluşturuyoruz. Sayfa içerisinde ki kod yapısını şu şekilde oluşturalım:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - JSON Nedir ? Nasıl Kullanılır ?</title>
</head>
<body>
<div id="data-list"></div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
// data.js içerisinden gelen değerler için bir fonksiyon oluşturuluyor ve içerisine data parametresi gönderiliyor.
$.getJSON('data.js',function(data){
// list isimli bir değişken oluşturularak içerisine ul ekleniyor. UL birazdan gelecek tüm liste elemanlarını tutucu görevini üstlenecektir.
var list = "<ul>";
// For döngüsü oluşturarak data.js içerisinde ki tüm verilerin gezilmesi gerektiğini yazmış olduk. Bu döngüde "i" isimli bir değişken oluşturup bu değişkenin "data.cars" parametresi içerisinde ki veriler bitene kadar döngü içerisinde aktif olarak var olması gerektiğini belirttik. Data.cars parametresi içerisinde ki "data" yı fonksiyonu oluştururken tanımlamıştık. "cars" ise data.js sayfası içerisinde ki verilerin başına eklediğimiz cars değişkeninden gelmektedir. Aynı sayfa içerisinde örneğin beyaz eşya ürünlerini de tutmamız gerekebileceği için her veri grubunu bir değişken içerisine almak en sağlıklı yöntemdir.
for(var i in data.cars) {
// üstte oluşturulan list değişkeni içerisine data.js içerisinde ki araçlar bitene kadar yeni Lİ'ler ekleniyor.
list += "<li>" + "Marka : " + data.cars[i].brand + "<br>" + "Model : " + data.cars[i].model + "<br>" + "Renk :" + data.cars[i].color + "<br>" + "Plaka : " + data.cars[i].plate.cityNumber + " " + data.cars[i].plate.plateText + " " + data.cars[i].plate.plateNumber + "</li><br><br><br><br><br><br>";
}
// liste bittikten sonra list değişkenini kapatmak için içerisinde </ul> ekleniyor.
list += "</ul>";
// list içerisine gönderilen tüm değerler #data-list içerisine yazdırılıyor.
$("#data-list").html(list);
});
</script>
</html>
Bir sonra ki uygulamada input içerisine girilen değerleri her “keyup” işleminde data.js içerisinde ki değerler ile karşılaştıracağız. Karşılaştırma metodu olarak da kelimelerin bire bir eşleşmesi gerekecektir. Araçların markalarına göre yapacağımız karşılaştırmada değerler eşleştiğinde bir tablo içerisine aynı markaya sahip tüm araçların listesini yazdıracağız.
search-for-word.html isimli bir sayfa oluşturuyoruz ve kod yapısını şu şekilde düzenliyoruz:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - JSON Nedir ? Nasıl Kullanılır ?</title>
</head>
<body>
<input type="text" id="search-input" />
<table class="data">
<tr class="title">
<th>Marka</th>
<th>Model</th>
<th>Renk</th>
<th>Plaka</th>
</tr>
</table>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
// değişkenler oluşturuluyor
var value;
$("#search-input").keyup(function(){
// her karakter girişi yapıldığında içerisinde yazan tüm değerler value değişkenine gönderiliyor.
value = $(this).val();
// daha önceden kalan değerlerin kaldırılması için her karakter girişinde tabloda ki başlık satırı dışında ki satırlar siliniyor.
$("table.data tr").not(".title").each(function(){
$(this).remove();
});
// data.js içerisinden gelen değerler için bir fonksiyon oluşturuluyor ve içerisine data parametresi gönderiliyor.
$.getJSON('data.js',function(data){
// for döngüsü içerisinde i değişkeni oluşturuluyor ve uzunluğu data.cars bitene kadar olduğu belirtiliyor.
for(var i in data.cars){
// eğer input içerisinden gelen değer ile döngü de o an bulunan aracın marka isimleri eşleşiyorsa bu if'in içerisine giriliyor.
if (data.cars[i].brand == value) {
// data class'ına sahip tablo içerisine append metodu ile eşleşen tüm değerler yeni satır olarak ekleniyor.
$("table.data").append("<tr><td>" + data.cars[i].brand + "</td><td>" + data.cars[i].model + "</td><td>" + data.cars[i].color + "</td><td>" + data.cars[i].plate.cityNumber + " " + data.cars[i].plate.plateText + " " + data.cars[i].plate.plateNumber + "</td></tr>");
}
}
});
});
</script>
</html>
Bu uygulamada kelimelerin bire bir eşleşmesini bekledik ve eşleşmenin sağlandığı değerleri ekrana yazdırdık. Sırada ki uygulamamızda bunu biraz daha geliştirerek her karakter girişinde data.js içerisinde ki araçların markalarında aynı uzunlukta ki değerlere bakarak karşılaştırma yapacağız. Örneğin “RENAULT” marka araçları aratmak isteyen bir kullanıcı “RE” yazdığında Renault marka araçlar listelenecek. Böylece arama yapmak isteyen kişi kelimeleri tamamlamak zorunda kalmayacaktır. search-for-character.html isimli bir sayfa oluşturuyoruz ve kod yapısını şu şekilde düzenliyoruz:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - JSON Nedir ? Nasıl Kullanılır ?</title>
</head>
<body>
<input type="text" id="search-input" />
<table class="data">
<tr class="title">
<th>Marka</th>
<th>Model</th>
<th>Renk</th>
<th>Plaka</th>
</tr>
</table>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var value,length,slice;
$("#search-input").keyup(function(){
// her karakter girişi yapıldığında içerisinde yazan tüm değerler value değişkenine gönderiliyor.
value = $(this).val();
// her karakter girişi yapıldığında içerisinde yazan karakterlerin sayısı length değişkenin gönderiliyor.
length = value.length;
// daha önceden kalan değerlerin kaldırılması için her karakter girişinde tabloda ki başlık satırı dışında ki satırlar siliniyor.
$("table.data tr").not(".title").each(function(){
$(this).remove();
});
// input içerisinde karakter girişi yapıldıktan sonra eğer karakter sayısı 0'dan büyük ise(yani karakter var ise) if döngüsü içerisine giriliyor.
if (length > 0) {
// data.js içerisinden gelen değerler için bir fonksiyon oluşturuluyor ve içerisine data parametresi gönderiliyor.
$.getJSON('data.js',function(data){
// for döngüsü içerisinde i değişkeni oluşturuluyor ve uzunluğu data.cars bitene kadar olduğu belirtiliyor.
for(var i in data.cars){
// döngü her çalıştığında o an seçili olan elemanın markası slice değişkeni içerisine gönderiliyor. Değeri değişken içerisine gönderirken tamamı değil, ilk karakterden length değişkeni içerisinde ki sayıya kadar olan kısmı gönderiliyor.
slice = data.cars[i].brand.slice(0,length);
// eğer slice ve value değişkenleri içerisinde ki değerler eşit ise if döngüsü içerisine girliyor.(value input içerisinden, slice ise data.js içerisinden geliyor.)
if (slice == value) {
// değerlerin eşit olduğu her eleman tablo içerisine yeni bir satır olarak ekleniyor.
$("table.data").append("<tr><td>" + data.cars[i].brand + "</td><td>" + data.cars[i].model + "</td><td>" + data.cars[i].color + "</td><td>" + data.cars[i].plate.cityNumber + " " + data.cars[i].plate.plateText + " " + data.cars[i].plate.plateNumber + "</td></tr>");
}
}
});
}
});
</script>
</html>
Sıradaki uygulamamızda input’un bulunduğu alanın tam altına fixed olarak konumlanacak bir liste oluşturacağız. Input’a her karakter girişi yapıldığında data.js içerisinden diğer uygulamalarda yaptığımız gibi kontrol yapıp eğer karakter bazlı olarak eşleşme sağlanıyor ise liste içerisine yeni bir “li” oluşturarak ekleyeceğiz. Input içerisinde karakter kalmadığında ise Js ile oluşturduğumuz div’i sileceğiz.
search-for-fixed-list.html isimli bir sayfa oluşturuyoruz ve kod yapısını şu şekilde düzenliyoruz:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - JSON Nedir ? Nasıl Kullanılır ?</title>
</head>
<body>
<input type="text" id="searh-input" />
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var value,length,slice;
$("#searh-input").keyup(function(){
// her karakter girişi yapıldığında içerisinde yazan tüm değerler value değişkenine gönderiliyor.
value = $(this).val();
// her karakter girişi yapıldığında içerisinde yazan karakterlerin sayısı length değişkenin gönderiliyor.
length = value.length;
// sayfada var olan ya da var olduğunu saydığımız data-list içerisinde ki tüm liste elemanları kaldırılıyor.
$("ul.data-list li").each(function(){
$(this).remove();
});
// input içerisinde karakter girişi yapıldıktan sonra eğer karakter sayısı 0'dan büyük ise(yani karakter var ise) if döngüsü içerisine giriliyor.
if (length > 0) {
// body içerisine append metodu ile data-list class'ına sahip olan bir ul ekleniyor.
$("body").append('<ul class="data-list"></ul>');
// eklenen ul'nin css özellikleri belirleniyor. Fixed olup üst ve sol boşluğu tam input altına gelecek şekilde ayarlanıyor.
$(".data-list").css({
"position":"fixed",
"top":$("#searh-input").offset().top + $("#searh-input").outerHeight(true),
"left":$("#searh-input").offset().left,
"width":$("#searh-input").outerWidth(true),
"margin":0,
"padding":"10px 0",
"background-color":"#dddddd"
});
// data.js içerisinden gelen değerler için bir fonksiyon oluşturuluyor ve içerisine data parametresi gönderiliyor.
$.getJSON('data.js',function(data){
// for döngüsü içerisinde i değişkeni oluşturuluyor ve uzunluğu data.cars bitene kadar olduğu belirtiliyor.
for(var i in data.cars){
// döngü her çalıştığında o an seçili olan elemanın markası slice değişkeni içerisine gönderiliyor. Değeri değişken içerisine gönderirken tamamı değil, ilk karakterden length değişkeni içerisinde ki sayıya kadar olan kısmı gönderiliyor.
slice = data.cars[i].brand.slice(0,length);
// eğer slice ve value değişkenleri içerisinde ki değerler eşit ise if döngüsü içerisine girliyor.(value input içerisinden, slice ise data.js içerisinden geliyor.)
if (slice == value) {
// değerlerin eşit olduğu her eleman data-list içerisine yeni bir li olarak ekleniyor.
$("ul.data-list").append("<li><div>" + data.cars[i].brand + "</div><div>" + data.cars[i].model + "</div><div>" + data.cars[i].color + "</div><div>" + data.cars[i].plate.cityNumber + " " + data.cars[i].plate.plateText + " " + data.cars[i].plate.plateNumber + "</div></li>");
}
}
});
// eğer input içerisinde karakter yok ise data-list kaldırılıyor.
}else{
$("ul.data-list").remove();
}
});
</script>
</html>
Json ile ilgili yapacağımız uygulamaların sonuna geldik. Anlaşılırlığının kolay olması için kodların açıklamasını yorum olarak ilgili satırın üstüne ekledim.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 61 No ‘lu Maddeden İndirebilirsiniz..
Anlatımınız çok açıklayıcı olmuş, teşekkürler.
Benim yapmaya çalıştığım bir url üzerinden veriyi almak ve kendi sayfamda paylaşmak bunun için yardımcı olabilir misiniz ?