I have the following json document
// json.json
[
{
"title":"title1",
"value":12234
},
{
"title":"title2",
"value":"some text"
},
{
"title":"title3",
"value":"12qwerty234"
},
{
"title":"title4",
"value":123.5
}
]
I am using jQuery to load it. Here is the code:
$(document).ready(function(){
$.getJSON("json.json", {},function(result){
$.each(result, function(i, obj) {
$("form").append($('<label for="'+i+'">'+obj.title+'</label>'));
$("form").append($('<input id="'+i+'" value="'+obj.value+'" type="text"/><br>'));
});
});
});
My problem is, that I am getting a syntax error in Firefox. I load json.json
as a local file.
Here is a screenshot (the error says "syntax error at line 1")
Note, that form has been generated successfully.
Edit :
Here is another screenshot from Chrome when running python SimpleHTTPServer
:
The reason this happens is because you're using a local file, so a mime type of "text/xml" is implied and hence Firefox will try to parse it as XML into .responseXML
of the underlying XHR object. This of course fails.
You may just ignore this, or specify the mimeType
yourself:
$.ajax({
dataType: "json",
url: "json.json",
mimeType: "application/json",
success: function(result){
$.each(result, function(i, obj) {
$("form").append($('<label for="'+i+'">'+obj.title+'</label>'));
$("form").append($('<input id="'+i+'" value="'+obj.value+'" type="text"/><br>'));
});
}
});
PS: Using plain XHR you would use overrideMimeType()
I ran the same code on a webserver and no syntax error is generated. While it generates a syntax error when loaded from file:///. SO, it's basically the "scheme".
I think, error produced because of json file is a local file. Try to load with your webserver, like nginx or apache.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With