How to consume OData service with Html/Javascript?

We have also produced a pretty cool little library called Data.js (http://datajs.codeplex.com/) that will significantly speed up OData consumption from JavaScript. Here's a sample in CoffeeScript:

success = (data) -> $("#searchResultsTemplate").tmpl(data).appendTo("#resultsArea")
error = (err) -> $("#resultsArea").text(JSON.stringify(err.message))

do ->
  $("#search").click(->
    OData.defaultHttpClient.enableJsonpCallback = true
    OData.read("http://odata.netflix.com/v2/Catalog/Titles?$top=5", success, error))

And the JavaScript it generates:

 success = function(data) {
    return $("#searchResultsTemplate").tmpl(data).appendTo("#resultsArea");
  };

  error = function(err) {
    return $("#resultsArea").text(JSON.stringify(err.message));
  };

  (function() {
    return $("#search").click(function() {
      OData.defaultHttpClient.enableJsonpCallback = true;
      return OData.read("http://odata.netflix.com/v2/Catalog/Titles?$top=5", success, error);
    });
  })();

So far I've been successful using it with CoffeeScript, jQuery and Knockout.js.

If you want to display data in the table and use sorting, paging, search, you can use jQuery dataTables plugin https://www.datatables.net/ with OData connector http://vpllan.github.io/jQuery.dataTables.oData/

You don't need any additional programming since dataTables will perform there operations for you.

As an alternative, you can give a shot to JayData, which has oData support - based on the supercool datajs library. It provides an abstract data access layer over several storage providers or protocols, one important of them is OData.

The above mentioned query would look something like this

var  source = new $data.yourOdataContext({serviceUri:"http://odata.netflix.com/v2/Catalog"});

source.Titles
  .take(5)
  .forEach( function(catalog) { render(catalog); });

As you might wouldn't expect this gets translated to .../Titles?$filter=5, so operations are not done on the client, even if the simple syntax might suggest.

JayData will give you JavaScript Language Query (JSLQ) letting you query for data using the ES5 standard filter function: all with JavaScript, not knowledge of OData query syntax is required.

OData sources can return data as JSON so your web pages can XHR your data and receive it as JSON which gets de-serialized back into a Javascript object for you to pick apart and act-upon or display.

Here are some additional links to get you started:

• New Javascript OData Library [MSDN]
• OData protocol by example [MSDN]
• Leveraging OData end-points in JSON format with JQuery
• Consume an OData service with JayData
• Consume an OData service with BreezeJS

HTH.