$.getJSON returns undefined and produces an XML parsing error

Question

Before I start, I would like to point out this is for a school project and that I've looked at multiple search results and after 2 hours of doing so, I frankly give up... My issue is that the following code:

var books;
var x = $.getJSON("book_data.json", function(response){
    books = response;
});
console.log(x.responseJSON, books);

logs the following:

undefined undefined

with an error:

XML Parsing Error: syntax error
Location: file:///C:/Users/.../book_data.json
Line Number 1, Column 1:

The json it pulls can be found here.

I've added a

console.log(response);

in the getJSON block to ensure that it can parse it (Which it can) as well as just logging x to ensure I do get a proper response (which I do). I've found other stack overflows and I've tried their suggestions but I still haven't been able to solve this problem. Is there a better way to get the information I want or should I give up and just convert the json into a one liner and put it in my html file?

you are logging the response too soon. move the `console.log` into the function (up one line). — Get Off My Lawn, Jun 30 '18 at 23:27
I've tried doing that, but logging it doesn't help me with the error nor does it help me keep the object array produced from parsing the .json. I don't see the point in parsing every time I need it, especially when I won't be editing that information on the client side and I plan on having it be used for multiple features. — Siewiei, Jun 30 '18 at 23:30

score 1 · Answer 1 · answered Jun 30 '18 at 23:38

1

$.getJSON is an async method, you need to read the json content only in the callback function.

Also, since you're reading the json file from your local C: drive, mimeType of "text/xml" is implied and hence your browser will try to parse it as XML into .responseXML of the underlying XHR object. This will fail causing XML Parsing Error., you need to specify mimeType before calling the getJSON,

$.ajaxSetup({
    scriptCharset: "utf-8",
    contentType: "application/json; charset=utf-8"
});

var books;
var x = $.getJSON("book_data.json", function(response){
    books = response;
    console.log(JSON.stringify(books));
});

One more thing, make sure book_data.json has valid json data

answered Jun 30 '18 at 23:38

Ajanth

2,435
3
20
23

I'm still getting the error. And I've put the data through two different validators. – Siewiei Jun 30 '18 at 23:48
In your browser's network tab, check if book_data.json response is retrieved properly – Ajanth Jun 30 '18 at 23:53
There is no GET request for it if that's what you're asking. However, I can access the book_data.json through the debugger. Not sure if that counts... – Siewiei Jul 01 '18 at 00:03
Since you have a $.getJSON("book_data.json", there should be a GET request fired from your browser, which you can see in Network tab of developer tools. You need to verify if that call returns valid JSON. If it doesn't, then something else that you haven't shared here is wrong. Being able to see the json file in debugger does not count in this context – Ajanth Jul 01 '18 at 00:29
That's the only place in the code where I even refer or use that file. – Siewiei Jul 01 '18 at 01:08
Try accessing book_data.json directly through browser (by typing its absolute path in address bar) – Ajanth Jul 01 '18 at 01:10
If I open up the html file with Chrome I get the following error: jquery.min.js:2 Failed to load file:///C:/Users/.../book_data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery.min.js:2 – Siewiei Jul 01 '18 at 01:12
In the address bar, it is able to parse it and detects it as a json. – Siewiei Jul 01 '18 at 01:16

score 0 · Accepted Answer · answered Aug 09 '18 at 00:25

After different attempts at loading the JSON, I was able to find a solution. When I tried to load the JSON in Firefox, I did not get any fatal errors, however, opening it in Chrome did. Chrome also gave a reason (and doing this from memory) but it had to do with security issues (My guess to help prevent potential XSS).

I was able to use http://myjson.com/ to store my JSON and get the desired file without the errors showing up. I assume the error was happening since I was running it locally from the html file rather than a server handling the file.

score 0 · Answer 3 · answered Sep 07 '20 at 11:36

0

In my case, I used my own code as the server (basically borrowed here), and the header

Content-Type: application/json

was missing. Added

    httpExchange.setAttribute("Content-Type", "application/json");

to the server's code, and it worked.

answered Sep 07 '20 at 11:36

18446744073709551615

16,368
4
94
127

$.getJSON returns undefined and produces an XML parsing error

3 Answers3