Tag Archives: json

How IMDB’s Speedy Search Suggestions Work

May 1, 2013 by Matt | Posted in General 2 Comments

IMDB Search JSONIf you type a few letters into the search field over at the Internet Movie Database, you might notice how fast it is. That’s because they’re not served dynamically from their primary servers. IMDB, instead, serves the JSON data for search suggestions from a CDN, resulting in a significant speed boost. They use pregenerated static files to make this possible.

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.)

Get Twitter and Facebook Link Statistics with JSON and jQuery

Jun 24, 2011 by Matt | Posted in Coding, Featured 26 Comments

Both Twitter and Facebook have little JavaScript widgets that allow you to share a page using the respective service, displaying a running total of users who have done so. While that’s fine for most purposes, what if you just need the count, for some atypical application?

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

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.

Tempo: A Tiny JSON Templating Engine

Apr 25, 2011 by Matt | Posted in Coding No Comments

Tempo is a 4kb JavaScript library that renders JSON into an HTML template. Your script can take something like this…

<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.

JSONView: View JSON Data in Firefox

Sep 24, 2010 by Matt | Posted in Coding No Comments

JSON is a popular way to format AJAX responses, as it’s more compact than XML and essentially a JavaScript object, but it can be a real pain to work with due to uncooperative browsers. It’s easy enough to view XML in a web browser, which is good for testing, but JSON responses cause a download prompt to open. This makes it harder to verify that an AJAX request is working properly.

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.

WordPress JSON API Plugin

Jun 11, 2010 by Matt | Posted in WordPress No Comments

WordPress provides an RSS feed for just about every part of the website. You can get XML output for anything, from posts to tags to comments. But what if you’re working with JavaScript? Wouldn’t it be nice to have a JSON option? That’s what the JSON API plugin does. Appending ?json=1 to the end of any WordPress URL will work like the RSS option, but the feed will be formatted as JSON. It can even be used to submit comments, if you invoke the right method.

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]