Consuming a Microsoft Web Service with jQuery

Question

Hi evertbody,

I'm trying to consume a WCF webservice using jQuery. The returned Json data is:

{
    "ListOfPersons":
        "[
            {'Id':1,'FirstName':'Foo','LastName':'Bar'},
            {'Id':2,'FirstName':'Hello','LastName':'World'},
            {'Id':3,'FirstName':'Tanks','LastName':'Giving'},
        ]"
}

These are the functions I'm using in Jquery is:

 var url = 'http://path/to/webservice.svc/ReturnTheList';
    $.getJSON(url, function (data) {
        success: readData(data)
    });

    function readData(data){
        alert(data.ListOfPersons[0].FirstName);
    }

The problem is that the alert doesn't return anything.

And, If I modify the Json to:

{
    "ListOfPersons":
        [
            {"Id":1,"FirstName":"Foo","LastName":"Bar"},
            {"Id":2,"FirstName":"Hello","LastName":"World"},
            {"Id":3,"FirstName":"Tanks","LastName":"Giving"},
        ]
}

(I replaced the simple quotes by double quotes and removed the double quotes before the [ and after the ]).

So I concluded that it's a problem with the returned format. The problem is that I can't modify this web service . How can I consume a "bad-formatted" json structure?

Thanks you,

Regards

EDIT:

Here is the Web Service signature:

 [OperationContract]
        [WebInvoke(Method = "GET",
             BodyStyle = WebMessageBodyStyle.WrappedResponse,
             ResponseFormat = WebMessageFormat.Json)]
        string ReturnTheList();

Answer 1

To get desired just use eval -to convert second part of pair into jscript data structure:

function readData(data){
    var subArr =  eval(data.ListOfPersons);
    alert(subArr[0].FirstName);
}

Answer 2

The newer versions of jQuery (since 1.4 I think) will not load invalid JSON at all.

You have two options—you can write a server-side proxy which calls the web service, parses the invalid JSON and returns it in a valid form, or you can use this function (written by Alex Sexton, not me!):

jQuery.getInvalidJSON = function(url, data, callback) {
    return jQuery.get(url, data, function(d){
        callback.call(this, (new Function('return (' + d + ')'))());
    }, "text");
};

This basically does the same thing as Dewfy's answer: performing an unsafe eval on the JSON string to get a usable object. Make sure you trust the source before using this method, as anything nefarious hidden in the JSON will be executed.

Edit: I had a bit of time to actually test this and it turns out there was a small mistake in Alex's function. The JSON string (variable 'd') needs to be wrapped in parentheses to be evaluated as an object—I've edited the above code accordingly.

While the above will load JSON that's not quite strictly valid (missing quotes around property names, single quotes instead of double etc), it does have its limits. The JSON you are working with from this web service is just plain broken.

It seems to be the double quotes around the array that are causing most of the problems. You can work around this like so:

jQuery.getInvalidJSON = function(url, data, callback) {
    return jQuery.get(url, data, function(d){
        var cleaned = d.replace(/"\[/g, '[').replace(/\]"/g, ']');
        callback.call(this, (new Function('return (' + cleaned + ')'))());
    }, "text");
};

And call it like this:

$.getInvalidJSON(url, null, readData);

This is very hacky though and I'd strongly recommend fixing the web service so it returns proper, valid JSON.