How do I parse this invalid JSON string in jQuery?

Question

Hi, I am looking to access the various bits of data in this data attribute:

<div class="location" data="{id: 4, point: {lng: -71.413364, lat: 41.673681}, category: 'Restaurant'}">

The data attribute is easy enough to reach in jQuery, of course. But the string seems to be a non-standard or invalid form of JSON. I've tried JSON.parse() and also a basic JS method of splitting the array. By all accounts, it just seems to be an invalidly-serialized string.

Will I need to reformat the data string? (it doesn't come from me, and it's used by other routines that I'd rather not break, so...)

Answer 1

Normally I'd say this is dangerous (and in fact I'll say it now), but try:

var decoded;  eval("decoded = " + $('div.location').attr('data'));

It's invalid JSON because the labels aren't quoted.

Answer 2

The reason why you are getting a parse error is that the property names aren't properly quoted. This works though:

var obj = eval("(" + "{id: 4, point: {lng: -71.413364, lat: 41.673681}, category: 'Restaurant'}" + ")");

The enclosing () is needed to avoid eval treating {} as a block statement.

Answer 3

The JSON is malformatted for parsing. It works if you reformat like this:

var obj = jQuery.parseJSON('{"id": 4, "point": {"lng": -71.413364, "lat": 41.673681}, "category": "Restaurant"}');

$("#blah").text(obj.point.lng);