Retrieve data from OData using jQuery.getJSON and jQuery.map

Dynamics CRM 2011 exposes an OData service that can be used for easy retrieval of data from client side code. Here is an example on how you can use jQuerys $.getJSON to retrieve data, and $.map to map the data to a javascript object.

The goal of this example is to create a “phone-book” of all accounts in the system. This will be presented in a html webresource on a dashboard. It will not have any sorting, paging etc, but this is merely a simple example on how to retrieve data in a clean manner.

First you have to create a htm file and add a reference to jQuery. I have chosen the CDN hosted version in this example, but you could also upload it as a web reference and reference it from there.

<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="ClientGlobalContext.js.aspx"></script>

I have also added a reference to ClientGlobalContext.js.aspx. This is included as default in Dynamics CRM 2011 and gives you access a function called GetGlobalContext() that you in turn use, among other things, to get the server url for your CRM installation.

var context = GetGlobalContext(),
serverUrl = context.getServerUrl(),
odataEndpoint = "/XRMServices/2011/OrganizationData.svc";

function Account(data) {
this.name = data.Name;
this.telephone = data.Telephone1;
this.email = data.EMailAddress1;
}

In addition to setting necessary variables we also define a structure for Accounts that we are going to retrieve from CRM.
Now we are ready to retrieve the data:

var query = "/AccountSet?$select=*";
$.getJSON(serverUrl + odataEndpoint + query, function (data) {
// Run when data returns
var accounts = $.map(data.d.results, function (item) { return new Account(item); });
displayAccountList(accounts);
});

TIP: Use this tool ( OData Query Designer ) if you need help building your OData queries.

Note that we use $.map to iterate the result from the query. The alternative to this would be something like this:

var accounts = [];
for (var i = 0; i < data.d.results.length; i++) {
accounts.push(new Account(data.d.results[i]));
}

At my opinion $.map gives a much cleaner code. The use of the helper method $.getJSON also saves allot of code compared to for example using $.ajax directly.

To finish it off we must have some code to inject the result into the DOM:

function displayAccountList(accounts) {
$.each(accounts, function (index, account) {
$("#accountsTable").append("<tr><td>" + account.name + "</td><td>" + account.email + "</td><td>" + account.telephone + "</td></tr>");
});
}

And voila!

The same method for retrieving OData can just as well be used in a script on a form. I have only chosen a html webresource for simplicity.

You can download the a complete example html file and play with it here. Just upload is as a webresource and add it to the dashboard.

Leave a Reply

Your email address will not be published. Required fields are marked *