Fun Building a Netflix Movie Browser with oData and jQuery

I've been experimenting with the Netflix oData service these last few hours, and I've come up with this simple little demo.

What is Netflix

The Netflix website offers visitors the possibility to have instant access to movies and TV programes by paying a small monthly fee.  The mini-site demo that I've developed here is limited to browsing movies. It's not enabled to viewing them.  In fact, to do this from this demo application you'll have to click the image and access the Netflix website directly.  This is so mainly because I live outside the US and therefore I'm unable to sign up with Netflix to use their service. 

My Netflix Demo

The demo is really unpretentious and aims at showing how cool it is to consume an oData service from a simple html page with a little jQuery.  Here I'd also like to alert the user that this service is still at a preview stage, therefore it might at times be a little buggy.  For instance, some links to movie images are broken and as a consequence those images aren't displayed on the page. Now a few words on the demo.

Search movies by typing in the searchbox

On this page you can simply type a movie title and click the button:

Search movies by release date

Each date represents a decade. Therefore, by clicking, for instance 1970, images of movies released between 1970 and 1980 are displayed on the page.

Search movies by actor/actress name

By selecting a name in the dropdown list all movie images in which that name appears are displayed on the page. The dropdown list is dynamically populated on page load using a jQuery ajax call to the Netflix oData service.

Validation

If you click the button before making a selection or typing a movie title, an alert box pops up with the appropriate instruction:

What happens if you move the mouse over each movie image

The image is singled out with a red border and a slightly enlarged shape. As a consequence a gentle shuffling effect occurs all over the page.

If you select your movies using the actor/actress' name, moving the mouse over the image produces an animated effect:

What happens when you click the movie image

The page shows a dialog box with the clicked movie details. By clicking the image in the box you're whisked off to the Netflix website at the appropriate page.

If you click the animated image, this takes you to the appropriate Netflix web page right away.

Key coding points

The crucial coding points are crafting the URL to the Netflix oData service and setting up the AJAX call to the Netflix oData service by using the jQuery $.ajax function. The rest of the work is carried out in the callback function that simply processes the returned data for display on the page thanks to the help of the fabulous jQuery library.

Url to query the Netflix catalog

In the searchbox demo, the url is built as follows:

var movieName = $('#txtMovieTitle').val();
var movieTitle = escape(movieName);

var queryURL = "http://odata.netflix.com/
/Catalog/Titles?$callback=myCallback
&$format=json
&$filter=Type eq 'Movie' and substringof'"
+ movieTitle"', Name";

In the select by release year demo it's done like so:

var queryURL = "http://odata.netflix.com/
Catalog/Titles?
+= $top=20&
+= $callback=myCallback&
+= $format=json&
+= $filter=ReleaseYear ge " +
releaseYearSelected + "
+= and ReleaseYear le " + selectedEndDecade;

In the select by actor/actress name demo we have one url to populate the dropdown list, which is as follows:

//Build URL to request actor names
//for the dropdown list
var myMoviePeopleURL = "http://odata.netflix.com/
Catalog/People?
+= $top=200&
+= $callback=myActorsCallback&
+= $format=json";

and another url to access the movies after an actor/actress name has been selected from the dropdown list, like so:

var myMovieTitlesURL = "http://odata.netflix.com/
Catalog/People(" + selectedActorId + ")
+= /TitlesActedIn?
+= $callback=myTitlesCallback&
+= $format=json";

AJAX call

This is done the same way in all demos, except for referencing the appropriate callback function name. In the searchbox demo, this looks like this:

//Make jsonp call to Netflix
$.ajax({

dataType: 'jsonp',
url: queryURL,
jsonpCallback: 'myCallback',
success: myCallback,
error: function() {
alert('Error occurred');
},
timeout: 60000

}); //end ajax function

Other great demos

Fortunately, great developers have been extremely generous with their oData demos over the web. Just focusing on the Netflix service and jQuery clients here are my favourites:

• Stephen Walther's Netflix, jQuery, JSONP, and OData
• Hal Nesbitt's Querying Netflix oData Catalog via JSON and jQuery

Test the demo yourself, download the code, or have fun coding a more creative one of your own.