jQuery JSON example

Hi, today i am going to tell you about JSON (JavaScript Object Notation) before start work on json, we should know about JSON and how we use it, a JSON is lightweight data passing format and use to sending data as a web service file, before json, web developer's use XML to send data,  a json is very easy to write and readable, now i will show you a basic example on how to passing json data from client side.

JSON Syntax

the json is name/value pairs, json data separated by columns, you can put objects in curly braces and arrays in square brackets  

// JSON

"name" : "lessoncup"

// JSON Object

{"name": "lessoncup", "title" : "lessoncup programming blog", "url": "www.lessoncup.com" }


// JSON Array

{
"Lessoncup": [{"name":"lessoncup"}, {"title":"lessoncup programming blog"}, {"url":"www.lessoncup.com"}]
}

Passing JSON data using jQuery

to display the json the using jquery, we use $.getJSON() method this method have three parameters

• url [ string ]
• data [ optional ]
• success [ optional ]

JSON Script

{
 "name": "lessoncup",
 "title" : "lessoncup programming blog",
 "url": "www.lessoncup.com"
}

jQuery Script

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('#btn').click(function(){
  
  $.getJSON( "users.json", function( data ) {
  
  var items = [];
  
  $.each(data, function(name,value) {
   
  items.push('<li>'+name+' : '+value+'</li>')
   
  $(".result").html(items);
  
  });
  
  });
   
 });

  
});

</script>

Live Demo