REST and SharePoint 2010 Quick Start Guide: Sample Browser Client with JQuery


Table of Contents for this Series

This time I construct a simple browser client (IE8 in my case) that takes a SharePoint library’s raw XML and converts it to something somewhat decent looking within the browser. A more comprehensive treatment of these technologies can be found here – . The intent here is to cut through some of the chatter (albeit, good chatter) and get to work.

.NET ==> WCF ==> WCF Data Services (was ADO.NET Data Services) ==> REST (oData / ListData.svc) ==> SharePoint 2010 Services

The CTP for data services targets the Microsoft .NET Framework 3.5 SP1 with regard to ListData.svc

Of course, REST also manifests within the MVC framework but takes a different route through the .net technology stack related to building applications (sans web form technology). Don’t be confused.    

Ok, JavaScript can really suck at times – especially without the robust tools enjoyed by hardcore .NET/Java developers. However, JQuery makes building REST friendly applications a compelling and fun alternative when the requirements are small and well defined. In this case, building out some simple functionality from SharePoint 2010.

By the way, if you look in C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14ISAPI you will see the following WCF service files


You will note ListData.svc, I’ll have more to say about the others as I move through my REST posts. 

Ok, getting down to business. I start with a SharePoint 2010 picture library (I called Company Research Group) and added a few items as follows (images courtesy of image search)


We can now use REST to return data on these scientists as shown in my previous post.

The actual REST call begins with http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup/  

*BEWARE* spaces in the library name are automatically removed from the URL


Here are the actual results



…and if you filter on one entry, http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup?$filter=(Title eq ‘Richard Feynman’) you will see


This is not an RSS feed from SharePoint 2010 since we are using the ListData.svc as our access vehicle. Although it displays like an RSS feed.

To see the actual XML itself (within IE 8) go into Internet options


Then “Feeds and Web Slices”


Uncheck “Turn on feed reading view” as shown above. Then you will see the generated XML, example below

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://win-dcbei0i59th/_vti_bin/ListData.svc/" xmlns:d="" xmlns:m="" xmlns="">
  <title type="text">CompanyResearchGroup</title>
  <link rel="self" title="CompanyResearchGroup" href="CompanyResearchGroup" />
  <entry m:etag="W/&quot;4&quot;">
    <title type="text">Albert Einstein</title>
      <name />
    <link m:etag="&quot;{0DCCE5A8-E8A2-45C5-88E0-1AB50B8C940B},5&quot;" rel="edit-media" title="CompanyResearchGroupItem" href="CompanyResearchGroup(1)/$value" />
    <link rel="edit" title="CompanyResearchGroupItem" href="CompanyResearchGroup(1)" />
    <category term="Microsoft.SharePoint.DataService.CompanyResearchGroupItem" scheme="" />
    <content type="image/jpeg" src="http://win-dcbei0i59th/Company%20Research%20Group/Albert%20Einstein.jpg" />
    <m:properties xmlns:m="" xmlns:d="">
      <d:Name>Albert Einstein.jpg</d:Name>
      <d:Title>Albert Einstein</d:Title>
      <d:PictureWidth m:type="Edm.Int32">128</d:PictureWidth>
      <d:PictureHeight m:type="Edm.Int32">160</d:PictureHeight>
      <d:DatePictureTaken m:type="Edm.DateTime" m:null="true"></d:DatePictureTaken>
      <d:Description m:null="true"></d:Description>
      <d:ID m:type="Edm.Int32">1</d:ID>
      <d:Created m:type="Edm.DateTime">2009-12-28T20:24:24</d:Created>
      <d:CreatedByID m:type="Edm.Int32">1</d:CreatedByID>
      <d:Modified m:type="Edm.DateTime">2009-12-28T20:26:54</d:Modified>
      <d:ModifiedByID m:type="Edm.Int32">1</d:ModifiedByID>
      <d:CopySource m:null="true"></d:CopySource>
      <d:Path>/Company Research Group</d:Path>
      <d:CheckedOutToID m:type="Edm.Int32" m:null="true"></d:CheckedOutToID>
      <d:IsCurrentVersion m:type="Edm.Boolean">true</d:IsCurrentVersion>
      <d:Owshiddenversion m:type="Edm.Int32">4</d:Owshiddenversion>

Building a browser client with JQuery + HTML,

The browser client code uses the JQuery library hosted by Microsoft see

As of this post I do not know if JQuery is planned to be hosted (as yet anyways) within SharePoint 2010. In any event the script tag I’m using is

<script src="; type="text/javascript"></script>

The code I plan to use revolves around the JSON extensions for JQuery, see

Here is my raw JQuery code (simple minded but works)


<script src="" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

    $.getJSON("http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup",function(data) {

            var count = 0;
            $.each(data.d.results, function(i,result) {
                var src = result.__metadata.media_src;
                var title = result.Title;
                html = "<table border=’0′ style=’float: left’>
                <tr><td style=’color:blue’>" + title +"</td></tr>
                <tr><td><img src=’" + src + "’ width=’150′ height=’150’/></td></tr>





   <div id="resultarea">

The unfiltered URL results with http://win-dcbei0i59th/_vti_bin/ListData.svc/CompanyResearchGroup


Of course, this post was not intended to create a web client with any bells and whistles, just a quick demo of using REST and JQuery to pull data from SharePoint 2010. The actual web page does nothing more than the original SharePoint display but you can see the power in our hands I’m sure.

A vulnerability using GET has been identified when returning JSON data, as explained by Phil Haack in this post I don’t think this matters as much for known/secured/trusted intranet environments as such. 

That’s all for now



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s