Q:

Loading JSON from a local HTML5 web app using JavaScript

I am developing a small HTML5 web app, that users can use offline with their browsers, cross-platform. They will receive the wep app on a CD or USB-Stick and double-click the HTML file. The HTML file then loads CSS, JavaScript files etc... all locally from the same directory/subdirectories.
So far, everything is fine. But I want also to load a file (also local, from the very same directory) that contains JSON, and use that data to build part of the DOM. 
    $.getJSON("playlistcontent.json", function (json) {
        //use the data...
    });

Here I ran into the famous 

Origin null is not allowed by Access-Control-Allow-Origin

error. There are a lot of resources about this, even quite similar questions. But since this is intentionally locally, the proposed solutions do not work.
However, since AJAX is "Asynchronous" I thing there is probably a more "synchronous" or otherwise better approach? What about JSONP?
Note: I know that I can start the browser (especially Chrome) with the security check disabled, but this is not an option for my users.

A:

I answered a similar question here.
You can use HTML5's File API, which includes a FileReader, and then call JSON.parse on the result.

A:

I would use Felix Kling's approach with JSONP. Wrap your data file in in a callback function:
(function(data) {
  // Do things with your data object here
})(
  // Put your data object here as the argument to the callback
);

When you include this script file with a  tag, the callback function will automatically be executed.

