-1

I want to load data from a JSON file in my local using JS/jQuery preferably.

I know there are atleast 10 question on SO with the same answers.

I don't want those. In all of those answers I get a "jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/.../js.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

Please suggest me a solution to this. If your suggestion is set up a server and host the file there then use it, please help me do it?

Any possible working suggestion is welcome(except the old add json using a script tag, etc). Thanks.

Emily
  • 96
  • 1
  • 11
  • 2
    Run a local server when developing locally. – epascarello Jun 02 '16 at 19:50
  • 1
    use `` and have the user choose the file – dandavis Jun 02 '16 at 19:51
  • XAMPP should be helpfull for local server, if on Windows. – fsacer Jun 02 '16 at 19:52
  • 1
    Or node or php or IIS. You can make Chrome ignore it with a flag, but running code off file protocol has different restrictions. – epascarello Jun 02 '16 at 19:52
  • Once I setup a server, Whats the procedure? Is there a guide I could follow? – Emily Jun 02 '16 at 19:52
  • @epascarello I know I could ignore it, but I wanted to know if I could somehow do it without that. – Emily Jun 02 '16 at 19:53
  • @dandavis Ok.. I get the file & then? – Emily Jun 02 '16 at 19:54
  • Well just put your files in www directory, htdocs on xampp. – fsacer Jun 02 '16 at 19:54
  • look into `-allow-file-access-from-files` – epascarello Jun 02 '16 at 19:55
  • @epascarello as I mentioned earlier, I know that. But I would like to know how to do it without that. Like by hosting the file on the server. Any guide to that? – Emily Jun 02 '16 at 19:56
  • @fsacer I put my file there, run server & try to access using "`http://localhost/.../file.json`" and I get the same error. – Emily Jun 02 '16 at 19:57
  • @Emily It should have worked. The error must be diffrent if you load http://localhost. Also have a look at http://stackoverflow.com/questions/7683596/xmlhttprequest-for-local-files – fsacer Jun 02 '16 at 19:59
  • @fsacer That looks helpful, shall go through that. Yes error was different, it was "`No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.`". – Emily Jun 02 '16 at 20:01
  • @Emily did you use the right path. Maybe just relative file.json. Also this might be issue http://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin. – fsacer Jun 02 '16 at 20:11
  • @Emily you might have to set header Access-Control-Allow-Origin: * – fsacer Jun 02 '16 at 20:14
  • once the user picks out a file, then use `FileReader()` to extract the contents, and `JSON.parse()` to turn it into an object. look for FileReader tuts... – dandavis Jun 02 '16 at 20:37

3 Answers3

1

You are making an http request to the local file system, that is not possible.

Check that limited support in HTML5 with the file API but I still doubt its what you want.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Paul Swetz
  • 2,234
  • 1
  • 11
  • 28
  • I am open to run a local server, I just want to know how to do it, like is there a guide? – Emily Jun 02 '16 at 20:05
  • That's a pretty big question but if on windows look at IIS (http://www.iis.net/), otherwise look at Tomcat (http://tomcat.apache.org/). Now those are web servers so it requires knowledge across a bunch of technologies. A pure JavaScript stack you could check out is Node.js (https://nodejs.org/en/about/) then you could avoid having to run full on web servers. – Paul Swetz Jun 03 '16 at 12:24
1

Use JSON server https://github.com/typicode/json-server to run a local JSON server instead of directly accessing the disk.

Vlad
  • 8,038
  • 14
  • 60
  • 92
  • Thanks for that, but still looking for a js/jQuery solution. (possibly without a package add) – Emily Jun 02 '16 at 19:59
  • It *is* a JS solution. At least do some research when someone gives you an answer. I don't think you'll get anything out of this thread if you dismiss valid answers just because you don't understand. You are trying to access a local JSON, and the way to do it is to set up a local JSON server. That library I suggested is the simplest JSON server you could ever set up. – Vlad Jun 02 '16 at 21:31
  • @Vlad she doesn't want additional packages and she is not neccessarily using node. – fsacer Jun 02 '16 at 21:57
  • @fsacer yes. Thank you. – Emily Jun 04 '16 at 10:47
0

You should use a local webserver such as XAMPP/LAMP/MAMP or IIS/Apache. A related question that should help is here. Another solutions that might work if you really want just filesystem are using iframe and HTML5 FileSystem APIs.

EDIT: When setting XAMPP, after putting your files into htdocs, you might have to set header Access-Control-Allow-Origin *. This can be achieved with putting this into .htaccess file in the htdocs directory:

Header set Access-Control-Allow-Origin "*"
Community
  • 1
  • 1
fsacer
  • 1,382
  • 1
  • 15
  • 23