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 s

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

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 3

You could this OData client based on axios I wrote.

https://github.com/fabio-nettis/ODCJ

The OData Connector For Javascript or more formerly know as ODCJ, is a promise based client that uses axios to establish connections to OData V3/V4 services. ODCJ provides a lot of useful functions to customize the request url and filtering properties.

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.

Answer 5

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.