Ç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>