How to Consume OData Service Using jQuery

In this article I will explain how to consume OData service using jQuery  in Visual Studio 2012.

Getting Started

1. Open Visual Studio 2012.
2. Go to "File" => "New" => "Project..."
3. Select "Visual C#" in installed templates.
4. Select "ASP.NET Web Application".
5. Enter the Name and choose the location.
6. Click "OK".

This is my OData service URL:

http://localhost:8958/ConsumeODataInJQuery/CustomersDataService.svc/

<?xml version="1.0" encoding="UTF-8" standalone="true"?>
-<service  xmlns="http://www.w3.org/2007/app" xmlns:app="http://www.w3.org/2007/app" xmlns:atom="http://www.w3.org/2005/Atom" xml:base="http://localhost:8958/ConsumeODataInJQuery/CustomersDataService.svc/">
-<workspace>
<atom:title>Default</atom:title>
-<collection href="Customers">
<atom:title>Customers</atom:title>
</collection>
</workspace>
</service>

Now add a new HTML page for the application and add a few tags, such as:

<h3>How to consume OData using jQuery</h3>
<a href="#" id="LoadCustomers">Load Customers</a>
<div id="StatusDiv"></div>
<ul id="CustomersList"></ul>

 Now add a file reference for jquery.min:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
         $(document).ready(function () {            
             var qryAllEmployees = "http://localhost:8958/ConsumeODataInJQuery/CustomersDataService.svc/Customers";

             $('#LoadCustomers').click(function () {
                 $('#CustomersList').text("");
                 $('#StatusDiv').text("Loading employee data...");
                 $.getJSON(qryAllEmployees, function (results) {
                     $('#CustomersList').text("");
                     $.each(results.d, function (i, item) {
                         $('#CustomersList').append("<li>Contact Names: " + item.ContactName + "<br/><br/></li>");
                         $('#StatusDiv').hide();
                     });
                     $('#status').text("");

                 });

             });
         });
</script>

 

Now hit F5 to see the output.

Image 1.

Click on the load customers link button:

Image 2.