How to consume OData service with Html/Javascript?

Question

Our project currently uses Silverlight to consume an Odata service. This has made life pretty simple since we can just reference the OData service thus giving us generated service reference/entities.

However there is some discussion on whether we should move to Html (html5). I'd like to know what to expect if we make this change. We'd be leveraging a framework like jQuery of course.

• My main concern is how to consume the same OData service via JavaScript/jQuery.
• How are we suppose to deserialize/serialize entities returned from this OData service?
• Is our data contract supposed to be hard-coded (if so, this is really unacceptable for us)?

Thanks!

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.