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!

Admetus

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.

Hughmanick

To add additional links to the above suggest libraries. ODataJs - datajs.codeplex.com/documentation – Chantellechanter

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.

Yeast

Actually, breezejs mentioned above, uses this library under the covers to provide its OData functionality. – Evonneevonymus

As does JayData and a number of other libraries. :) It's not going anywhere. – Yeast

A "pretty cool little library": at 81KB minified it's not cool or little. We're looking only to communicate with the Bing API and to load such a massive library for a simple operation seems rather wasteful. I'm sure it does a million other things, but that's beside the point. – Pedalfer

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.

Boyles

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.

Armillda