Reporting syntax errors in a JSON object with jQuery and/or Javascript

Question

What the best way to report a syntax error when I'm loading a JSON feed with jQuery? I can establish the error reporting settings like this:

error: function(xhr){
    alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
}

however this function doesn't fire when the URL I've called loads a valid page (albeit not one with a JSON object in it). Futhermore, I can't check the data that it does return because (according to Firebug at least) jQuery.getJSON breaks at the syntax error before it passes the object to the function that executes it.

The reason I'd like to report errors is because this is my way of checking whether the user has supplied a URL that will produce a valid JSON feed.

Here's a related answer that requires control over what the server will respond with. Here's the syntax error that Firebug gives me The syntax error Firebug gives me http://img.skitch.com/20090623-8c97g47jha4mn6adqqtjd41cwy.jpg

Any ideas? Thanks

Answer 1

Thanks to all who answered. Because I was calling a JSON feed from an external domain, I wasn't able to just use jQuery's AJAX functionality and pull the feed as "text" instead of "json". jQuery only allows you to pull "json" and "script" from a remote source.

What I ended up doing instead was writing a PHP script to make the external call that lived on my own server. I use jQuery AJAX to call this, pass the requested source in the URL, and then grab that as "text." I then run my own check to ensure that it's properly formatted JSON, and then parse it with another library. jQuery doesn't have the ability to parse JSON at the moment; $.getJSON only works if you pass a URL to it.

Answer 2

You can bind a function to global ajaxerror events

$(document).ajaxError(function(event, request, ajaxOptions, thrownError){
  if ( 4==request.readyState) { // failed after data has received
    alert(ajaxOptions['url'] + " did not return valid json data");
  }
  else {
    alert("something else wnet wrong");
  }
});

or use $.ajax() instead of $.getJSON()

function foo() {
  // $.getJSON("http://localhost/test.txt", function(data){});
  $.ajax({
    type: "GET",
    url: "http://localhost/test.txt",
    success: function (data, textStatus) {
      alert("succuess");
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("request failed: " + textStatus);
    },
    dataType: "json"
  });
}

edit: But you might want to keep in mind that both ajax(dataType:"json") and getJSON() (which simply invokes .ajax(dataType:"json") boil down to data = window["eval"]("(" + data + ")") ...this might not be what you want if you don't know what (arbitrary) data your script requests. And this could explain why firebug is catching a syntax error when you feed it an html document instead of json data.
In that case better request dataType:"string" und run the data through a fully fledged json parser lib.

Answer 3

Call the URL or the XHR request directly in your browser's address bar, do a view-source and paste the result into and IDE that understands JavaScript. You'll probably spot a misplaced quote or something.

At least you'll be able to remove chunks of it until you find the offending syntax if nothing else.

Answer 4

Adding to Diodeus' answer, paste your potentially offending JSON into here this tool: http://jsonformatter.curiousconcept.com/

If you have firebug, you might even be able to hack together a way to use the site a service programmatically, though that may be frowned upon.