Display JSON data using jquery/ajax

JSON –  Javascript Object Notation, is one of the beautiful techniques for parsing data. It’s beautiful primarily because it is light weight!

Here, I’m going to demonstrate how to display JSON data using ajax and jquery.

Let’s read some sample json data that is available in a file called json.test.js


[
 {
 "LinuxID":"1","LinuxDist":"Debian","Company":"Debian Project"<br>
 },
 {
 "LinuxID":"2","LinuxDist":"Ubuntu","Company":"Canonical Ltd."<br>
 },
 {
 "LinuxID":"3","LinuxDist":"Fedora","Company":"Fedora Project"<br>
 }
]

Now let’s write the html and javascript to display these results:

We call this file called displayjson.html:

<!DOCTYPE html>
<html>
<head>
<title>Display JSON data</title>
</head>
<body>
<div id="results"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post("json.test.js",
function(data){
var obj=jQuery.parseJSON(data);
for(var i=0;i<obj.length;i++){
$("#results").append("Linux ID: "+obj[i].LinuxID).hide().fadeIn(500);
$("#results").append("<br>Linux Distribution: "+obj[i].LinuxDist).hide().fadeIn(500);
$("#results").append("<br>Company: "+obj[i].Company).hide().fadeIn(500);
$("#results").append("<br><hr>").hide().fadeIn(500);
}
});
});
</script>
</html>

 

Check out examples at Fun with JSON.
That’s it folks, enjoy!

Advertisements

4 comments on “Display JSON data using jquery/ajax

  1. I think that everything published made a ton of sense.
    But, think about this, suppose you added a little information?
    I am not saying your content isn’t good., but what if you added a post title that makes people desire more? I mean Display JSON data using jquery/ajax | Things I digged into! is kinda plain. You ought to look at Yahoo’s home page and note how they create article titles to grab people interested.
    You might add a video or a related picture or two to get readers interested about
    what you’ve got to say. Just my opinion, it could make your posts a little livelier.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s