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>
