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:


<?xml version="1.0" encoding="UTF-8" standalone="true"?>
-<service  xmlns="" xmlns:app="" xmlns:atom="" xml:base="http://localhost:8958/ConsumeODataInJQuery/CustomersDataService.svc/">
-<collection href="Customers">

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=""></script>
script type="text/javascript">
         $(document).ready(function () {            
             var qryAllEmployees = "http://localhost:8958/ConsumeODataInJQuery/CustomersDataService.svc/Customers";

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





Now hit F5 to see the output.


Image 1.

Click on the load customers link button:


Image 2.