Looking to build a work-around of the following.

$.getJSON('myfile.json', function (data) {
    showAll(data);
});

I want to avoid using a webserver, but just want to access the file directly.

getJSON uses a web request, which presents the error: XMLHttpRequest cannot load file:///Users/me/Documents/project/myfile.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I want a work around. I've read things about renaming to .js and then just linking it from the HTML file. Any ideas?

Looking to build a work-around of the following.

$.getJSON('myfile.json', function (data) {
    showAll(data);
});

I want to avoid using a webserver, but just want to access the file directly.

getJSON uses a web request, which presents the error: XMLHttpRequest cannot load file:///Users/me/Documents/project/myfile.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I want a work around. I've read things about renaming to .js and then just linking it from the HTML file. Any ideas?

• javascript
• json

• You should really use a web server. – SLaks Commented Feb 29, 2016 at 23:56
• You might wish to specify what you mean by "directly". Some user is browsing your website on her puter, i.e. your JavaScript is running on her puter. Do you want to read the file from that puter's local file system? Or if you want to load it from the server, what could be more "direct" than loading it over HTTP? – meriton Commented Mar 1, 2016 at 0:31

5 Answers 5

Simple, fast, but bad for real project solution:

1. Rename myfile.json to data.js (name doesn't matter).
2. Create a variable in data.js and initialize it with your json var myData = {...your json...}
3. Add <script src="./data.js"></script> to your html file.
4. Now you can use myData variable from javascript with all data.

This solution is bad because you add a new variable in global scope and browser would still make a http request to get this .js file.

Also, If you want to make ajax requests to your local files, you can use http server. Take a look at very simple node js http-server.

This would be a 3 step process.

Move the JSON file into a folder with you other web pages

In the JSON file, give the obejct a name i.e. var data = {...};

In the file that you wan to use it just call it with the <script src='myJSON.js'></script>

If you have a permission correctly, you can get the file using <script> tag.

in html:

<script src="./favs.js"></script>
<script src="./script.js"></script>

in favs.js:

var favs = [
    { url: 'http://google.' },
    { url: 'http://stackoverflow.' }
];

in script.js:

console.log(favs); // you can use favs as global variables

Otherwise, if you want to use ajax call such as $.getJSON(), you should have a webserver somehow.

Additionally, you can load js file dynamically. May you can use the code below for example:

function loadScript(path, onload) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = path;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
  if(onload) s.onload = onload;
}

If it is static JSON resource, why make another network request. Network is expensive. You can change to .js and include the file in the page.

AJAX is about making asynchronous HTTP requests. You need a web server to make those requests and receive those responses. JQuery's .get() method won't let you avoid a web server.

The only way I can think of would be to include an iframe in your code and set the source of the iframe to your resource that includes the JSON. Then, you could use JSON.parse() on the contents of the iframe.