Loading JSON from a local HTML5 web app using JavaScript

Question

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.

JSONP is nothing else than a JavaScript file containing a function call. So why don't you just make a JavaScript file out of your JSON file, by prepending `var data = ` and simply include the file as `script`. Then the ex-JSON data is interpreted as object literal and the data is available in the global variable `data`. — Felix Kling, Feb 14 '13 at 20:21

score 4 · Answer 1 · edited May 23 '17 at 11:56

4

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.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 14 '13 at 20:24

Jeff-Meadows

2,154
18
25

2

But you cannot read the file automatically without user interaction. – Felix Kling Feb 14 '13 at 20:26
1

That's true. Depending on the use case of the application, Marcel may prefer a different approach. – Jeff-Meadows Feb 14 '13 at 20:28
I don't think you can read a file from the file system. You can only open files from the sandboxed environment, that is, files you've created. You can only open files from the file system with a file input or drag and drop. – Ruan Mendes Feb 15 '13 at 05:11

score 1 · Answer 2 · answered Feb 14 '13 at 20:23

1

I like Felix Kling's approach, if all you need is JSON data, you can just load your data by setting JS variables and load the JSON files using script tags. However, if that's not enough for your needs, you can use a solution like http://www.server2go-web.de/ which will run a webserver from the CD, therefore bypassing the local file restrictions.

answered Feb 14 '13 at 20:23

Ruan Mendes

90,375
31
153
217

This does not fit my cross-platform requirements which is the reason I want to do it as a web app in the first place. – Marcel Feb 15 '13 at 19:14

score 1 · Accepted Answer · answered Feb 14 '13 at 20:39

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.

Loading JSON from a local HTML5 web app using JavaScript

3 Answers3