JQuery getJSON Fails on SharePoint REST Data Containing Apostrophe

Question

I'm using the JQuery's getJSON function to call the REST services available in SharePoint 2010. Everything seems to work fine unless the SharePoint data contains an apostrophe. When the data contains an apostrophe, the callback within the getJSON call will not execute.

In the data returned from SharePoint, the apostrophes appear to be escaped with a "\". Single quotes and other characters don't seem to create the problem.

$(document).ready(function () {
    $.getJSON(
        "http://<server>/<site>/_vti_bin/listdata.svc/Tasks", null,
        function (data) {
            alert("Function called");                
        });
});

Has anyone else encountered anything like this?

Answer 1

Upon further investigation, I think I found the problem. I created a simple list with a single item with Test' as the value for the title field. The apostrophe at the end illustrates the problem. SharePoint appears to escape the apostrophe in the returned JSON value:

{ "d" : { "results": [ { "__metadata": { "uri": "http:////_vti_bin/listdata.svc/JSONTest(1)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.JSONTestItem" }, "Id": 1, "ContentTypeID": "0x0100AC5DC67105487A4B87E86D93A3276612", "ContentType": "Item", "Title": "Test\'", "Modified": "\/Date(1292244302000)\/", "Created": "\/Date(1292244205000)\/", "CreatedBy": { "__deferred": { "uri": "http:////_vti_bin/listdata.svc/JSONTest(1)/CreatedBy" } . . .

It appears that an apostrophe is not a valid character to escape in JSON per the JSON spec:

RFC 4627 JSON July 2006

The representation of strings is similar to conventions used in the C family of programming languages. A string begins and ends with quotation marks. All Unicode characters may be placed within the quotation marks except for the characters that must be escaped: quotation mark, reverse solidus, and the control characters (U+0000 through U+001F)

Using the ajaxError function I did receive a message telling the JSON was invalid.

To deal with this situation, you could do something like the following. I used the JQuery template plugin (tmpl) to format the JSON results. Some more error handling is also needed to handle further possible JSON parsing failures.

$.ajax({
        url: "http://<server>/<site>/_vti_bin/listdata.svc/<list>",
        dataType: "json",
        success: function(data) {                                   
            //alert("successful");                  
            $("#templateID").tmpl(data.d.results).appendTo("#elementID");
        },
        error: function(data) {
            //alert("error");
            var sCleanJSON = data.responseText.replace(/\\'/g,"'");
            var objJSON = $.parseJSON(sCleanJSON );
            $("#templateID").tmpl(objJSON.d.results).appendTo("#elementID");
        }           
    });

Answer 2

This sounds weird... How about using $.get() instead of $.getJSON(), then massage the response into proper JSON form, and finally use $.parseJSON() to get the JSON object.