jQuery .getJSON Firefox 3 Syntax Error Undefined

Question

I'm getting a syntax error (undefined line 1 test.js) in Firefox 3 when I run this code. The alert works properly (it displays 'work') but I have no idea why I am receiving the syntax error.

jQuery code:

$.getJSON("json/test.js", function(data) {
    alert(data[0].test);
});

test.js:

[{"test": "work"}]

Any ideas? I'm working on this for a larger .js file but I've narrowed it down to this code. What's crazy is if I replace the local file with a remote path there is no syntax error (here's an example):

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Answer 1

Try renaming "test.js" to "test.json", which is what Wikipedia says is the official extension for JSON files. Maybe it's being processed as Javascript at some point.

Answer 2

For the people who don't use jQuery, you need to call the overrideMimeType method before sending the request:

var r = new XMLHttpRequest();
r.open("GET", filepath, true);
r.overrideMimeType("text/plain");

Answer 3

I found a solution to kick that error

$.ajaxSetup({'beforeSend': function(xhr){
    if (xhr.overrideMimeType)
        xhr.overrideMimeType("text/plain");
    }
});

Now the explanation: In firefox 3 (and I asume only firefox THREE) every file that has the mime-type of "text/xml" is parsed and syntax-checked. If you start your JSON with an "[" it will raise an Syntax Error, if it starts with "{" it's an "Malformed Error" (my translation for "nicht wohlgeformt"). If I access my json-file from an local script - no server is included in this progress - I have to override the mime-type... Maybe you set your MIME-Type for that very file wrong...

How ever, adding this little piece of code will save you from an error-message

Edit: In jquery 1.5.1 or higher, you can use the mimeType option to achieve the same effect. To set it as a default for all requests, use

$.ajaxSetup({ mimeType: "text/plain" });

You can also use it with $.ajax directly, i.e., your calls translates to

$.ajax({
    url: "json/test.js",
    dataType: "json",
    mimeType: "textPlain",
    success: function(data){
        alert(data[0].test);
    } });

Answer 4

getJSON may be insisting on at least one name:value pair.
A straight array ["item0","item1","Item2"] is valid JSON, but there's nothing to reference it with in the callback function for getJSON.

In this little array of Zip codes:

{"result":[["43001","ALEXANDRIA"],["43002","AMLIN"],["43003","ASHLEY"],["43004","BLACKLICK"],["43005","BLADENSBURG"],["43006","BRINKHAVEN"]]}

... I was stuck until I added the {"result": tag. Afterward I could reference it:

<script>
       $.getJSON("temp_test_json.php","",
        function(data) {
            $.each(data.result, function(i, item) {
                alert(item[0]+ " " + i);
                if (i > 4 ) return false;
              });
        });
</script>

... I also found it was just easier to use $.each().

Answer 5

Check if there's ; at the end of the test.js. jQuery executes eval("(" + data + ")") and semicolon would prevent Firefox from finding closing parenthesis. And there might be some other unseen characters that prevents it from doing so.

I can tell you why this remote location working though, it's because it's executed in completely different manner. Since it has jsoncallback=? as the part of query parameters, jQuery thinks of it as of JSONP and actually inserts it into the DOM inside <script> tags. Try use "json/test.js?callback=?" as target, it might help too.

Answer 6

HI

I have this same error when testing the web page on my local PC, but once it is up on the hosting server the error no longer happens. Sorry - I have no idea of the reason, but thought it may help someone else track down the reason