Consume WCF REST Service using jQuery

In a previous post I explained how to create a simple WCF Service in SharePoint.

http://kamilmka.wordpress.com/2012/08/24/restful-wcf-service-in-sharepoint/

In this post I’m going to explain how to consume the RESTfull WCF service using jQuery Ajax calls and interpret the JSON result.

WCF Services hosted in SharePoint does not support cross domain access by default. So in this example I’m going to develop a SharePoint Visual web part to consume the rest service. If you have a cross domain supporting service you can create a standalone app or a control using the same jQuery Ajax methods explained below.

1) Crate a Empty SharePoint Project.

2) Add a Visual web part to the project.

3) Make the jQuery script reference to the web part.

4) Add the below code to the user control file and deploy the solution. Add the web part to a web page and you can see the results.

  1.     <script type=”text/javascript”>
  2.         function GetLocationData() {
  3.             $.ajax({
  4.                 url: “/_vti_bin/Kamil.POC.WCFService/Service.svc/GetAllLocations”,
  5.                 success: function (result) {
  6.                     console.log(‘success’);
  7.                     PopulateMapLocations(result);
  8.                 },
  9.                 error: function (msg) {
  10.                     console.log(‘error’);
  11.                     console.log(msg);
  12.                     locationResults = null;
  13.                 }
  14.             });
  15.         }
  16.         function PopulateMapLocations(locationData) {
  17.             $.each(locationData, function () {
  18.                 console.log($(this)[0]);
  19.                 $(‘#locationResultsPlaceHolder’).append($(this)[0].Title);
  20.                 $(‘#locationResultsPlaceHolder’).append(‘<br>’);
  21.                 $(‘#locationResultsPlaceHolder’).append($(this)[0].Address);
  22.                 $(‘#locationResultsPlaceHolder’).append(‘<br><br>’);
  23.             });
  24.         }
  25.         $(document).ready(function () {
  26.             GetLocationData();
  27.         });
  28.     </script>

This script has a function named GetLocationData that will be calling the RESTfull WCF service. So from above you can see how simple to call the jQuery Ajax function to call the service. Only must provide option is url and in my sample I have provided the REST url for the GetLocations method as defined in WCF service. If service call get succeeded then I’m calling the PopulateMapLocations method with passing the result data. The result data is a JSON value location value collection. So we can iterate through the collection and retrieve any attribute same as the way we defined in the WCF service.

image
(Result view in browser)

In several places you can see I have used console.log() function. This is a very user friendly effective way of debugging scripts. I used to use alerts in the middle of the script but its very unfriendly when you are iterating through a loop. But this console.log option will log the passed parameter or the object to the browser console. And if you are using Google Chrome you can expand the object and see the result as well. So something very useful when developing and testing.

image
(Screen cap on how the Chrome browser console looks as per this sample)

Will have another post on how to display these consumed data in a Bing Map. Until then Happy Coding! Smile

3 comments

Leave a Reply

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