jQuery JSON example | Lessoncup Programming Blog

Saturday, 9 November 2013

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  

2 comments :

  1. Hi,

    I have the below code snippet:

    $( document ).ready(function() {
    alert("Inside Ready");
    var url = "url";
    $.getJSON(url, function(data) {
    alert("I am here");
    //do stuff
    });
    });

    url is checked. no issue with url. getting alert "Inside Ready" but control is not going inside getJSON hence not getting alert "I am here".

    Any idea what might be causing the issue? Need help!

    ReplyDelete
  2. It should work. Do you have any jsfiddle?

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons