In this post I want to illustrate how to use jQuery getJSON() method to load JSON data using an HTTP GET request. I prepared two examples, easy to understand if you are a jQuery beginner. The first example is a simple Twitter search and the second one is a simple Flickr search.

For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Using getJSON() to implement a Twitter Search

In this first example I used getJSON() to implement a simple Twitter Search that returns five results for page. Try to add something into input field below (for example, apple) and press the Search button to display search results:

This kind of search is really easy to implement just using some lines of JavaScript code. Add a link to jQuery into the <head> tag of the HTML page:

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

In the <body> tag add this code:

<input type="text" id="twitterQuery" /><button button id="twitterButton">Search</button>
<div id="results"></div>

<div id="results"> is the <div> that will contain the search results.


Then add this JavaScript code into the <head> tag, after the link to jQuery:

$(document).ready(function(){
var url="http://search.twitter.com/search.json?rpp=5&callback=?&q=";
var query;
  $("#twitterButton").click(function(){
  $("#results").html('');
    query=$("#twitterQuery").val();
    $.getJSON(url+query,function(json){
      $.each(json.results,function(i,tweet){
         $("#results").append('<div class="tweet">
         <img class="imgTweet" width="48" height="48" 
         src="'+tweet.profile_image_url+'"/>'+tweet.text+' 
         <strong>From:</strong> 
         <a href="http://twitter.com'+tweet.from_user+'">@'+tweet.from_user+'</a>
         </div>');
      });
    });
  });
});

The previous code is really simple to understand. The url var contains the string http://search.twitter.com/search.json?rpp=5&callback=?&q= for the Twitter API call. rpp is the number of tweets to return per page (it’s optional). For a full reference guide to the Twitter API take a look at the official documentation. $("#results").append()> appends search results into the layer with id results.

Using getJSON() to implement a Flickr Search

This second example is similar to the previous one. I implemented a simple Flickr search using getJSON(). Try to add something into input field below (for example, wave) and press the Search button to display search results:

This kind of search is really simple to implement. Add a link to jQuery into the <head> tag of the HTML page:

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

In the <body> tag add this code:

<input type="text" id="flickrQuery" /><button>Search</button>
<div id="results"></div>

Then add this JavaScript code into the <head> tag, after the link to jQuery:

$(document).ready(function(){
var url="http://api.flickr.com/services/feeds/photos_public.gne?
              &tagmode=any&format=json&jsoncallback=?&tags=";
var query;
$("#flickrButton").click(function(){
$("#results").html('');
  query=$("#flickrQuery").val();
      $.getJSON(url+query,
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#results");
            if ( i == 3 ) return false;
          });
       });
    });
});

The code above is really similar to the code you seen in the previous example. The url var contains the string http://api.flickr.com/services/feeds/photos_public.gne?&tagmode=any&format=json&jsoncallback=?&tags= for the Flickr API calls. $("#results").append() appends search results into the layer with id results. The if statement if (i==3) return false; limits the search results to 4. You can change that number as you prefer.

That’s all! Leave your comment if you have suggestions to improve the code.