Example of JQuery JSON on UI
February 01, 2013
JSON provides object oriented data reading on UI obtained from server. JSON has a format to create and retrieve data i.e {"key":"value"}. From server data will be sent to UI in the JSON format. There must be a JSON contract between client and server. JSON value can contain JSON array. It will look like [{"k20":"v20","k10":"v10"},{"k11":"v11","k21":"v21"},{"k22":"v22","k12":"v12"}]. This can be iterated with help of jQuery.each. For example we are taking the example of below JSON data as "res":[{"k20":"v20","k10":"v10"},{"k11":"v11","k21":"v21"},{"k22":"v22","k12":"v12"}]}.
<script src="jquery-1.7.2.js"></script> <script> //data in json format var jsondata='{"res":[{"k20":"v20","k10":"v10"},{"k11":"v11","k21":"v21"},{"k22":"v22","k12":"v12"}]}'; //pasre the data as json object res = jQuery.parseJSON(jsondata); //iterate json object with jQuery.each jQuery.each(res, function(pkey, pval) { // first level iteration and pkey will be "res" and pval will be json array. // iterate json array jQuery.each(pval, function(cnt, arrdata) { // cnt will give index of array and arrdata will have array index wise data which is json format again // iterate to get final key value pair data jQuery.each(arrdata, function(k, v) { // k has key data and v has data corresponding to key alert(k+","+v); }); }); }); </script>