$.getJSON() works in IE9, but not in Chrome and FireFox, whats wrong in my code?

Question

I developed a web application using IE9 and a text editor. It reads a JSON file, then fills some DIV elements according to that file and the logic of the JavaScript and jQuery code. Under IE9, it works perfectly.

Under Chrome, it fails to execute the $.getJSON() statement, so no data is available. Under FireFox, the $.getJSON() statement apparently runs (alert messages testify to this), but it doesn't read anything.

The JSON file passes JSONLint.

Neither Chrome nor FireFox indicate any errors.

I made a sample file using JSON data from the JSON site, validated it through JSONLint, then ran my code using that file. No difference--Chrome still ignores the $.getJSON() statement.

A relevant section of my code:

    function buildTree(centralID) {
      alert("Can we start, at least?");
     $.getJSON('sample.json', function(data) {
      alert("first success");
      $.each(data.person, function(i, xdata) {

Chrome displays the first alert but not the second.

Any ideas?

Answer 1

You can use the built in error function to display the error and debug it.

$(document).ready(function(){ // Make sure your jQuery is inside this
$.getJSON("sample.json", function(data) {
    alert('Point 1 Reached.');
    console.log(data); // Here we log to our console
    $.each(data.feed.entry, function(i, item) {
             // Do your stuff here
        }); // End of $.each

// Here Success, Completed & Error do something. chained onto $.getJSON
        }).success(function() { alert("success"); })
          .error(function(jqXHR, textStatus, errorThrown) { // Debug the error!!
                    console.log("error " + textStatus);
                    console.log("error throw " + errorThrown);
                    console.log("incoming Text " + jqXHR.responseText);
                }) // End of .error
          .complete(function() { alert("complete"); });
        });
}); // End of DOM Ready

This should show you the error in the console window of firefox or chrome (console.log will not work in IE and break the script). To bring up the console window in firefox or chrome press F12. If the JSON is not working, it will show an error which you can debug.

---

Update
Also make sure that this code is in your $(document).ready(). The $.getJSON() might cause unexpected behaviours across browsers if using it otherways.

Answer 2

Is this running on a web server or are you just opening the file in a browser? If you are just opening the file you will have problems.