Mustafa Çağatay KIZILTAN

7. Jquery ve JSON

Çoğu javascript frameworkleri JSON verileri ile haberleşir. Buna Jquery de dahildir.  Herhangi bir servisten, back-endten front-end’e veri alırken bu veriyi JSON formatında gönderip, ön taraftan da json formatında almalıyız.

JSON OBJESİ TANIMLAMA

<html>
<head>
 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script>

$(document).ready(function () {

var employeeJSON = {  //Json objesi tanımı
 "firstName": "cagatay",
 "lastName": "kiziltan",
 "gender": "Erkek",
 "salary": 5000

};

var result = '';
 result += 'First Name = ' + employeeJSON.firstName + '<br/>';  //Json verilerine ulaşma
 result += 'Last Name = ' + employeeJSON.lastName + '<br/>';
 result += 'Gender =' + employeeJSON.gender + '<br/>';
 result += 'Salary =' + employeeJSON.salary + '<br/>';

$('#divResult').html(result);
 
 
 });
 </script>


</head>
<body>
 
 <div id="divResult"></div>
 
</body>

</html>

JSON DİZİSİ TANIMLAMA

Bir Json objesi yerine json dizisi de tanımlayıp, içerisine birden fazla json objesi yerleştirebiliriz. Bu JSON objelerinin yönetimi dizilerdeki gibi indexler üzerinden yapılır.

 <script>

$(document).ready(function () {

var employeeJSON = [ //Json dizisi tanımı
 {   
   "firstName": "cagatay",
   "lastName": "kiziltan",
   "gender": "Erkek",
   "salary": 5000

 }, 
 {
   "firstName": "veli",
   "lastName": "ali",
   "gender": "Erkek",
   "salary": 5000

  }
    ];

var result = '';
 result += 'First Name1 = ' + employeeJSON[0].firstName + '<br/>';  //Json dizi elemanlarına ulaşma
 result += 'First Name2 = ' + employeeJSON[1].firstName + '<br/>';


$('#divResult').html(result);
 
 
 });
 </script>

 
 <div id="divResult"></div>

BİR DİĞER JSON DİZİSİ GÖSTERİMİ

İstersek Json obje dizisini indexler ile yönetmek yerine her bir objeye isim verip isimler üzerinden de yönetebiliriz.

<script>

$(document).ready(function () {

var employeeJSON = {
 "Todd":{
 "firstName": "cagatay",
 "lastName": "kiziltan",
 "gender": "Erkek",
 "salary": 5000

}, 
 "Sara":{
 "firstName": "veli",
 "lastName": "ali",
 "gender": "Erkek",
 "salary": 5000

}

};

$('#divResult').html(employeeJSON.Todd.firstName);
 
 
 });
 </script>