$.getJSON returns undefined and produces an XML parsing error

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?

Answer

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.