Json Veri Sıralama Tüm alanlara göre

Bir tabloda listelenen json veriyi istediğimiz her alanına göre sıralayabiliriz. Bunun için javascript’in dizi metodlarından sort metodunu kullanacağız. Sort metodu parametre olarak bir fonksiyon alır ve bu fonksiyonlar her türdeki verileri sıralayabiliriz. Bana göre bunlardan en işlevsel olanı da json veriyi sıralamak. Sürekli sunucuya bağlanmak zorunda kalmayız ve sunucunun işini yüksek oranda kolaylaştırır.

 

Önce <script> taqlarının arasına json verimizi bir değişkene aktararak ekliyoruz. Bu veriyi bir json dosyasındanda okuyabilirsiniz. Json verimiz aşağıdaki gibidir.

Sayfanın hmtl kısmında ise bir tablo yapısı ve bu tabloyu doldurmak için kullandığımız bir buton yer almaktadır. Butonun click olayınada doldur adını verdiğimiz bir içine parametre olarak sıralamak istediğimiz alanın adını yazdığımız bir bir metot da bulunmaktadır. Sayfanın body etiketleri arasında yazılan kod kısmı aşağıda verilmiştir.

Yukarıda doldur metodu çalıştırılırken ad alanı parametre olarak gönderildiği için ad alanına göre sıralı olarak gelmektedir. Şimdide doldur metodunu inceleyelim doldur metodunu json verimizin hemen altına ekleye bilirsiniz.

Doldur metodunda asıl sıralama işlemini yapan  o.ogrenciler.sort(function(o1,o2){return eval(“o1.”+alan)>eval(“o2.”+alan)}); satırıdır. Sort metodu parametre olarak bir anonim fonksiyon çağırır ve bu fonksiyon iki parametre alır. Bu parametreler ile biz sıralanacak alanı belirleriz. Fonsiyonun içinde eval metodu dikkatinizi çekmiştir. Bu metod metinsel olarak aldığı parametreyi çalıştırılabilir javascript koduna çevirir. Json nesnemizdeki her bir öğrenci o1 ve o2 olarak fonksiyona parametre olarak gönderilir. Biz öğrencilerin istediğimiz verilerine o1 den sonra nokta ekleyerek ulaşabiliriz. Örneğin o1.ad yazdığımızda ogrencinin adı o1.yas dediğimizde de ogrencinin yaşını öğrenmiş oluruz. eval metodu burada metinsel o1 ifadesi ile fonksiyona sıralamak için gönderdiğimiz alan değişkenini birleştirerek javascript kodu üretmektedir. Örneğin alan değişkeninin içinde yaş değeri gönderilmiş ise eval metodu o1.yas ifadesine dönüşecek ve öğrelerin yaşını karşılaştırmış olacağız bu sayede öğrencileri yaşına göre sıralamış olacağız.

ifadesiyle json verimizdeki öğrenci sayısını öğreniyoruz. Döngümüzü bu sayı ile çalıştırarak tüm öğrencilerimiz ekrana yazabiliriz.

ifadesiyle tablomuzun başlık kısmını oluşturuyoruz ve her bir başlığı link haline dönüştürüp bu linklere doldur metodunu atadık. Böyleşe başlık adını parametre olarak alan doldur metodu tabloyu bu alana göre sıralamaktadır. Bir linke tıklandığında bir javascript metodunu çalıştırmak istiyorsak href özelliğine öncelikle “javascript:” yazdıktan sonra metodun adını yazmamız gerekir. tablo.innerHTML = satir yazdığımız için butona tıklandığında sürekli tabloya ekleme yapmaz tablo önce sıfırlanır, sonra veriler yeniden eklenir.

ifadesiyle önce json verimizdeki tüm öğrencileri ogrenci adını verdiğimiz bir değişkene tek tek atıyoruz. Ve öğrencilerin verileri bir tablonun satırı oluşturup sütun isimlerinin içine sırasıyla öğrenci verilerini yazıyoruz. Kod ların hepsine bütün olarak aşağıdan ulaşabilirsiniz.