"not well-formed" warning when loading client-side JSON in Firefox via jQuery.ajax

Question

I am using jQuery's ajax method to acquire a static JSON file. The data is loaded from the local file system, hence there is no server, so I can't change the MIME type.

This works fine in Safari, but Firefox (3.6.3) reports the file to be "not well-formed". I am aware of, and have reviewed, a similar post here on Stack Overflow:

"not well-formed" error in Firefox when loading JSON file with XMLHttpRequest

I believe my JSON is well-formed:

{
    "_": ["appl", "goog", "yhoo", "vz", "t"]
}

My ajax call is straightforward:

$.ajax({
    url: 'data/tickers.json', 
    dataType: 'json',
    async: true,
    data: null,
    success: function(data, textStatus, request) {
        callback(data);
    }
});

If I wrap the JSON with a document tag:

<document>JSON data</document>

as was mentioned in the other Stack Overflow question referenced above, the ajax call fails with a parse error.

So: is there a way to avoid the Firefox warning when reading in client-side JSON files?

If I don't use the weird wrapper, then the JSON data is loaded, but I do get the malformed warning. — Zhami, Apr 12 '10 at 13:27

score 50 · Accepted Answer · edited May 23 '17 at 11:33

50

Sometimes using an HTTP server is not an option, which may mean that MIME types won't be automatically provided for some files. Adapted from Peter Hoffman's answer for jQuery .getJSON Firefox 3 Syntax Error Undefined, use this code before you make any $.getJSON() calls:

$.ajaxSetup({beforeSend: function(xhr){
  if (xhr.overrideMimeType)
  {
    xhr.overrideMimeType("application/json");
  }
}
});

Or, if you're using $.ajax():

$.ajax({
  url: url,
  beforeSend: function(xhr){
    if (xhr.overrideMimeType)
    {
      xhr.overrideMimeType("application/json");
    }
  },
  dataType: 'json',
  data: data,
  success: callback
});

edited May 23 '17 at 11:33

Community

1
1

answered Nov 20 '10 at 17:26

Ryan

659
7
13

5

Remarkably, it appears this is STILL needed in 2016 using $.getJSON(). – A. L. Flanagan Oct 28 '16 at 15:43
2

@A.L.Flanagan I am continuously surprised that this is still receiving upvotes. I'm happy for the points it brings, but I'm sad that it's not resolved in some other fashion through automatic detection of local file requests. – Ryan Nov 04 '16 at 08:15
1

Thanks, that worked for me! I am using jQuery locally without a server and it fixed my issue. – Salvo Apr 26 '17 at 14:40
@Salvo Glad to help! It's 2017 and this is still relevant. XD – Ryan Apr 26 '17 at 22:48
1

And it's apparently still relevant in 2018. Thanks. – DLH Jul 18 '18 at 02:14
@DLH Yikes. Glad to help! – Ryan Jul 18 '18 at 03:13
1

Sept 2018, and just used it for `$.ajax()`. – Pegues Sep 05 '18 at 23:16
1

@Pegues Glad this helped you! – Ryan Sep 07 '18 at 00:51
@Ryan, Thanks for this. I have the latest FF (75.0) and it is 2020, one decade after your answer and it is still relevant for $.ajax! I have ensured Mime type is supplied by the server side correctly which is not a problem in other browsers, but FF still has this warning. – BReddy Apr 16 '20 at 16:30

score -5 · Answer 2 · answered Apr 11 '10 at 22:33

-5

Local files and scripting don't mix. Way too much browser security stuff and other weirdness involved. If you want to test things, you should run your stuff through a HTTP server. Installing one locally might be a good idea.

answered Apr 11 '10 at 22:33

Matti Virkkunen

58,926
7
111
152

"not well-formed" warning when loading client-side JSON in Firefox via jQuery.ajax

2 Answers2

Linked