Home  >  jQuery

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>
 
jQuery API must be included here. JSON library which we have used is available in jQuery API.
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us