The goal of this example is to show you how to use the jQuery .getJSON() method.
The JavaScript Object Notation (JSON) is a data interchanging format. JSON is a set of key/value pairs, the value may be a string, boolean, number, object or an array. As an example look at this personal information in json format: {"name":"maykel","age":25}.
To get the json format data, jQuery provides us with a helpful method. The jQuery getJSON() method helps us to get json data from a URL and call a callback function to handle it. This method takes two parameters: the URL and the callback method.
Let’s look at some examples. To download the jQuery library, click here.
1. HTML
First of all you need to create a simple html document.
<!DOCTYPE html> <html> <head> <script src="jquery-2.1.4.min.js"></script> </head> <body> </body> </html>
2. jQuery getJSON examples
2.1 Getting json data example
Let’s add the following simple html code.
<div id="container" style="height:100px"></div> <a href="javascript:retrun 0;" onclick="showUserInfo()">Show User Info</a>
As you may notice in the following example, the .getJSON() method is used to send an ajax request and call the callback function to handle the json data.
<script type="text/javascript">
function showUserInfo(){
$.getJSON( "personaldata.json", function( data ) {
$.each( data, function( key, val ) {
$("<div>" + key + " = " + val + "</div>").appendTo( "#container" );
});
});
}
</script>
The json is as follows:
{
"firstname":"saeb",
"lastname":"nar",
"age":30
}
The result in the browser would be:
2.2 Getting complex json data example
Let’s add the following simple html code.
<div id="container" style="height:165px"></div> <a href="javascript:retrun 0;" onclick="showUsersInfo()">Show Users Info</a>
In this example, the values are complex objects. For that we need to handle them by iterating over their properties (please notice the line 6 of the following jQuery code).
<script type="text/javascript">
function showUsersInfo(){
$.getJSON( "personaldata2.json", function( data ) {
$.each( data, function( key, user ) {
$("" + key + "").appendTo( "#container" );
$.each( user, function( pkey, value ) {
$("" + pkey + " = " + value + "").appendTo( "#container" );
});
$("___").appendTo( "#container" );
});
});
}
</script>
The json is as follows:
{
"person1":{
"firstname":"Cem",
"lastname":"can",
"age":30
},
"person2":{
"firstname":"Manolya",
"lastname":"Ali",
"age":20
}
}
The result in the browser would be:
3.Conclusion
jQuery provides an easy method to get json data and handle them. The jQuery .getJSON() method is used for this purpose. This method sends an ajax request and calls the given callback function. The json is a set of key/value pairs, the value may be a string, boolean, number, object or an array.
4. Download
