For example, if you visit this URL, you’ll get a JSON file of results for Harry Potter films:

http://sg.media-imdb.com/suggests/h/harry.json

The “h” directory means the query starts with an “h,” as they group their result sets alphabetically, and the “harry” part is what was typed into the search box. So if you wanted results that would match Doctor Who, you could use /d/doct.json. (Spaces are replaced with underscores.)

They only seem to have result sets for 4-5 character inputs, though. So you can query “ince” but not “inception.” The latter will result in an error. I guess most searches common enough to be matched in the suggestion box are covered within that limitation.

It’s a clever implementation, and it has to save a lot of computing power on a site that large, in addition to being fast.

(Note that this is not a public API, and IMDB/Amazon probably wouldn’t be happy about you scraping it or anything like that. But it’s a nice thing to learn from.)

It’s not well-documented, but the two social media sites have JSON APIs for that purpose.

• http://urls.api.twitter.com/1/urls/count.json?url=THE_URL
• https://graph.facebook.com/THE_URL

With a little bit of jQuery magic, you can collect the values on page load and update the DOM with the number. Here’s something I threw together for a project I was working on:

(function() {

var url = 'http://xkcd.com/792/';

jQuery.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
jQuery('#socialstuff span.twcount').html(data.count);
});

jQuery.getJSON("https://graph.facebook.com/"+url+"&callback=?", function(data) {
jQuery('#socialstuff span.fbcount').html(data.shares);
});

}());

As long as you remember to include jQuery, and have the right HTML elements for the JavaScript to populate, it’s pretty much plug-and-play.

You can see it in action here.

<ol id="tweets">
 <li data-template>
  <img src="{{profile_image_url}}" />
  <h3>{{from_user}}</h3>
  <p>{{text}}</p>
 </li>
</ol>

…and populate it with JSON data from the Twitter API, which you could load with a couple lines of jQuery. It works with browser as far back as IE6 and doesn’t require any dependencies.

It seems like a friendlier way to deal with JSON data, and it offers the advantage of any templating system: you can separate the logic and data from the presentation.

Fortunately, a clever developer has built a Firefox extension to solve this problem. JSONView renders a plain-text representation of the JSON object, complete with indentation and color-coding whenever you access a URL that outputs JSON data. For example, the Twitter API. If you click this link in Firefox, you will be prompted to download the file. With JSONView installed, you would see output from the following image.

If you do much JavaScript work, be sure to install JSONView. It will save you some headaches when you have AJAX requests that aren’t working quite right.

This plugin was created for The Museum of Modern Art, whose weblog Inside/Out appears within an existing structure built with Ruby on Rails. Instead of reimplementing the site templates as a WordPress theme, we opted for a Rails front-end that displays content served from a WordPress back-end. JSON API provides the necessary interface for retrieving content and accepting comment submissions.

I like Chris Coyier’s suggestion of using it in conjunction with the jQuery UI Autocomplete component in order to add a Google Suggest-type feature to your search form.

WordPress JSON API Plugin [Digging into WordPress]

JSON API Usage Guide [JSON API]