Get JSON with jQuery using Ajax

JSON (JavaScript Object Notation) is an data exchange format and which is human-readable data. JSON has became very popular since that web pages have became interactive using AJAX. JSON format is easy to create from the server and easy to parse at client. In this post I will show you how to get JSON file from different server/ same server using jquery and Ajax and display it on webpage.

How to Read and Parse JSON using jQuery

jQuery provides a method called "getJSON" to load JSON-encoded data from the server using a GET HTTP request.

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) 

url: A string containing the URL to which the request is sent.
data: A map or string that is sent to the server with the request.
success(data, textStatus, jqXHR): A callback function that is executed if the request succeeds.

The "getJSON" method is shorthand Ajax function. To show you how getJSON method works, we will be using Flickr public gallery images. Flickr provides JSON format file for its public gallery images. You can select photos with particular tag from http://www.flickr.com/photos/tags/.

$(document).ready(function() {     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {         tags: "sunset",         tagmode: "any",         format: "json"     }, function(data) {         $.each(data.items, function(i, item) {             var img = $("");             img.attr('width', '200px');             img.attr('height', '150px');             img.attr("src", item.media.m).appendTo("#dvImages");             if (i == 3) return false;         });     }); });​ 

As you can see from above code, using getJSON method load the JSON file and once it is loaded, now loop through the file and show the images on the page. For demo purpose, I am showing only 4 images.

See result below.

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.