How to access a local JSON file with Javascript?

Question

I have a Python program that generates an html page for reporting results. The html page is saved in an output directory on disk alongside a javascript file that helps with dynamic table handling. I also save a JSON file to this output directory that I would like to read in with my javascript file. This JSON file has data from the Python run (saved dictionary) that I would like to be able to access. So in an output directory on disk I have:

C:/somedirectory/output/report.html
C:/somedirectory/output/tables.js
C:/somedirectory/output/data.json

All files have been created from my program.

My html page has a table with checkboxes and if those checkboxes are selected I would like to update a second table based on data saved in the JSON file. Thus I would like to open my html report in any browser and read in the JSON file as a javascript object.

I have been trying to use ajax and .getJSON but am getting the

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have searched and seen many similar problems but have not come across anything that quite fits what I need. Thoughts and a work around would be greatly appreciated. Thanks.

Update

Since everything is run locally on the client side I have decided to embed the JSON data (python dictionary) and javascript code directly into the html report output. This way the data is internally accessible and the html file can be passed around without dependency issues. The user with the answer I selected below has a link that eludes to this solution.

Are you running this HTML from an actual server, or just on your computer locally? — mjkaufer
– mjkaufer, Commented Jan 28, 2014 at 1:04
Sounds like you're accessing the json locally, which will result in problems from the same origin policy. To get around this, use jsonp. You'll need to specify this in your ajax call, stating that dataType: "jsonp" — cs_stackX
– cs_stackX, Commented Jan 28, 2014 at 1:37
@mjkaufer Nothing is running from an actual server, the files are local to a computer. The idea being a user installs a desktop python program, runs the program, and can pull up a nicely formatted html report of the findings. — Doug
– Doug, Commented Jan 28, 2014 at 17:46
@cs_stackX Thanks, I've looked a little into JSONP but without success yet, I'll give it another whirl. — Doug
– Doug, Commented Jan 28, 2014 at 17:47

Community · Accepted Answer · 2017-05-23 11:49:23Z

1

JavaScript runs on the client machine, hence it can only access files on the client machine using a special setup.

If you want it to read JSON on your server, you should use the path:

http://example.com/output/data.json

Better way would be to read/write JSON file from Python and then send the table data to JavaScript as in this answer: Send data from Python to Javascript (JSON)

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Jan 28, 2014 at 1:37

daniil.t

4902 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Doug Over a year ago

I ended up going with a similar approach that you directed to in the link. The answer for me at the moment is to embed everything in the html page, including javascript and json data. Then the html file can be passed around without dependencies. Thanks!

Collectives™ on Stack Overflow

How to access a local JSON file with Javascript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related