Json dosyasından Jquery ile veri okuma ve listeleme

Yapı olarak XML e çok benzeyen JSON tipinin ana amacı veri alış verişi yaparken daha küçük boyutlarda veri alıp göndermektir.  Açılımı JavaScript Object Notation dır.

Sizlerle bir json dosyasından veri nasıl okunulur ve okuduğumuz verileri nasıl listeleriz onu anlatacağım. Json dosyamız bir ftp üzerinde olabilir, bir dosyada olabilir ya da bir url de olabilir. Size bunu aşağıda örnek üzerinde anlatacağım.

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get Json Data</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  // burada script tag larının içine jquery kütüphanemizi ekliyoruz. 
</head>

<body>
<div>
    <script>
$(document).ready(function () {
var url = 'http://www.resuldolaner.com/json/data.json';  // url değişkenine json dosyamızın bulunduğu yeri yazıyoruz.
$.getJSON(url, function (data)  // url  deki json getJSON komutuyla data değişkenine atıyoruzve bir fonsiyonda kullanıyoruz

{
for (var i = 0; i < data.length; i++) {  // gelen datamızın kaç elemanlı olduğunu bilmediğimiz için length komutu bize sayısını veriyor ve o kadar  döndürüyoruz
if (data[i].enstituAdi == "Fen Bilimleri Enstitüsü")  // burası alıştırmamızın fonksiyonunu arttırmak için yazdım. gelen datadan belli şartı sağlayanları  listelemek için.  benim datamda toplamda 3 değer var ama listelediğinizde şartı  sağlayan sadece 2 data dönecektir.

{

document.write(data[i].ogrenciId + ” ” + data[i].ogrenciAdi + ” ” + data[i].ogrenciSoyadi + ” ” + data[i].okulAdi + ” ” + data[i].enstituAdi + "<br>");   //burada da ekrana şartı asağlayan verileri listeliyoruz. Verileri yazdırırken, verilerimiz satır satır okunur ve bu satırdaki her biri bir değişkene atanmıştır.  değişkenleri görmek için json dosyasını açıp bakabilirsiniz.
}
}
});

});

  </script>
</div>
</body>

</html>

 

Örnek json dosyası

Örnek html dosyası

çalışma dosyasını buradan indirebilirsiniz.

 

You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.