At
the last MIX conference, Netflix announced that they are exposing their catalog of movie information using
the OData protocol. This is great news! This means that you can take advantage of all of
the advanced OData querying features against a live database of Netflix movies. In this blog entry, I’ll demonstrate how you can use Netflix, jQuery, JSONP, and OData to create a simple movie lookup form.
The form enables you to enter a movie title, or part of a movie title, and display a list of matching movies. For example, Figure 1 illustrates
the movies displayed when you enter
the value robot into
the lookup form. Using
the Netflix OData Catalog API You can learn about
the Netflix OData Catalog API at
the following website: http://developer.netflix.com/docs/oData_Catalog
The nice thing about this website is that it provides plenty of samples. It also has a good general reference for OData. For example,
the website includes a list of OData filter operators and functions.
The Netflix Catalog API exposes 4 top-level resources: Titles – A database of Movie information including interesting movie properties such as synopsis, BoxArt, and Cast. People – A database of people information including interesting information such as
Awards, TitlesDirected, and TitlesActedIn. Languages – Enables you to get title information in different languages. Genres – Enables you to get title information for specific movie genres. OData is REST based. This means that you can perform queries by putting together
the right URL. For example, if you want to get a list of
the movies that were released after 2010 and that had an average rating greater than 4 then you can enter
the following URL in
the address bar of your browser: http://odata.netflix.com/Catalog/Titles?$filter=ReleaseYear gt 2010&AverageRating gt 4 Entering this URL returns
the movies in Figure 2. Creating
the Movie Lookup Form
The complete code for
the Movie Lookup form is contained in Listing 1. Listing 1 – MovieLookup.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Netflix with jQuery</title>
<style type="text/css">
#movieTemplateContainer div
{
width:400px;
padding: 10px;
margin: 10px;
border: black solid 1px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script src="App_Scripts/Microtemplates.js" type="text/javascript"></script>
</head>
<body>
<label>Search Movies:</label>
<input id="movieName" size="50" />
<button id="btnLookup">Lookup</button>
<div id="movieTemplateContainer"></div>
<script id="movieTemplate" type="text/html">
<div>
<img src="<%=BoxArtSmallUrl %>" />
<strong><%=Name%></strong>
<p>
<%=Synopsis %>
</p>
</div>
</script>
<script type="text/javascript">
$("#btnLookup").click(function () {
// Build OData query
var movieName = $("#movieName").val();
var query = "http://odata.netflix.com/Catalog" // netflix base url
+ "/Titles" // top-level resource
+ "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name
+ "&$callback=callback" // jsonp request
+ "&$format=json"; // json request
// Make JSONP call to Netflix
$.ajax({
dataType: "jsonp",
url: query,
jsonpCallback: "callback",
success: callback
});
});
function callback(result) {
// unwrap result
var movies = result["d"]["results"];
// show movies in template
var showMovie = tmpl("movieTemplate");
var html = "";
for (var i = 0; i < movies.length; i++) {
// flatten movie
movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl;
// render with template
html += showMovie(movies[i]);
}
$("#movieTemplateContainer").html(html);
}
</script>
</body>
</html>
The HTML page in Listing 1 includes two JavaScript libraries:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script src="App_Scripts/Microtemplates.js" type="text/javascript"></script>
The first script tag retrieves jQuery from
the Microsoft Ajax CDN. You can learn more about
the Microsoft Ajax CDN by visiting
the following website:
http://www.asp.net/ajaxLibrary/cdn.ashx
The second script tag is used to reference Resig’s micro-templating library. Because I want to use a template to display each movie, I need this library:
http://ejohn.org/blog/javascript-micro-templating/
When you enter a value into
the Search Movies input field and click
the button,
the following JavaScript code is executed:
// Build OData query
var movieName = $("#movieName").val();
var query = "http://odata.netflix.com/Catalog" // netflix base url
+ "/Titles" // top-level resource
+ "?$filter=substringof('" + escape(movieName) + "',Name)" // filter by movie name
+ "&$callback=callback" // jsonp request
+ "&$format=json"; // json request
// Make JSONP call to Netflix
$.ajax({
dataType: "jsonp",
url: query,
jsonpCallback: "callback",
success: callback
});
This code Is used to build a query that will be executed against
the Netflix Catalog API. For example, if you enter
the search phrase King Kong then
the following URL is created:
http://odata.netflix.com/Catalog/Titles?$filter=substringof(‘King%20Kong’,Name)&$callback=callback&$format=json
This query includes
the following parameters:
$filter – You assign a filter expression to this parameter to filter
the movie results.
$callback – You assign
the name of a JavaScript callback method to this parameter. OData calls this method to return
the movie results.
$format – you assign either
the value json or xml to this parameter to specify how
the format of
the movie results.
Notice that all of
the OData parameters -- $filter, $callback, $format -- start with a dollar sign $.
The Movie Lookup form uses JSONP to retrieve data across
the Internet. Because WCF Data Services supports JSONP, and Netflix uses WCF Data Services to expose movies using
the OData protocol, you can use JSONP when interacting with
the Netflix Catalog API. To learn more about using JSONP with OData, see Pablo Castro’s blog:
http://blogs.msdn.com/pablo/archive/2009/02/25/adding-support-for-jsonp-and-url-controlled-format-to-ado-net-data-services.aspx
The actual JSONP call is performed by calling
the $.ajax() method. When this call successfully completes,
the JavaScript callback() method is called.
The callback() method looks like this:
function callback(result) {
// unwrap result
var movies = result["d"]["results"];
// show movies in template
var showMovie = tmpl("movieTemplate");
var html = "";
for (var i = 0; i < movies.length; i++) {
// flatten movie
movies[i].BoxArtSmallUrl = movies[i].BoxArt.SmallUrl;
// render with template
html += showMovie(movies[i]);
}
$("#movieTemplateContainer").html(html);
}
The movie results from Netflix are passed to
the callback method.
The callback method takes advantage of Resig’s micro-templating library to display each of
the movie results. A template used to display each movie is passed to
the tmpl() method.
The movie template looks like this:
<script id="movieTemplate" type="text/html">
<div>
<img src="<%=BoxArtSmallUrl %>" />
<strong><%=Name%></strong>
<p>
<%=Synopsis %>
</p>
</div>
</script>
This template looks like a server-side ASP.NET template. However,
the template is rendered in
the client (browser) instead of
the server.
Summary
The goal of this blog entry was to demonstrate how well jQuery works with OData. We managed to use a number of interesting open-source libraries and open protocols while building
the Movie Lookup form including jQuery, JSONP, JSON, and OData.
