How to parse a JSON file without web request or web server?

Question

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?

You might wish to specify what you mean by "directly". Some user is browsing your website on her computer, i.e. your JavaScript is running on her computer. Do you want to read the file from that computer'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
– meriton, Commented Mar 1, 2016 at 0:31

Timur Bilalov · Accepted Answer · 2016-03-01 00:10:03Z

5

Simple, fast, but bad for real project solution:

Rename myfile.json to data.js (name doesn't matter).
Create a variable in data.js and initialize it with your json var myData = {...your json...}
Add <script src="./data.js"></script> to your html file.
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.

edited Mar 1, 2016 at 0:10

answered Mar 1, 2016 at 0:04

Timur Bilalov

3,7422 gold badges18 silver badges14 bronze badges

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

1 Comment

user3072843 Over a year ago

This is not the answer on how to load a JSON file. It just show how to store an object in a Javascript file.

pevik · Accepted Answer · 2020-04-08 11:20:47Z

3

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>

edited Apr 8, 2020 at 11:20

pevik

4,8513 gold badges40 silver badges51 bronze badges

answered Mar 1, 2016 at 0:02

user2417483

Comments

Edward · Accepted Answer · 2016-03-01 00:01:25Z

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.com' },
    { url: 'http://stackoverflow.com' }
];

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;
}

Suresh · Accepted Answer · 2016-03-01 00:02:45Z

1

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.

answered Mar 1, 2016 at 0:02

Suresh

5151 gold badge4 silver badges14 bronze badges

1 Comment

User Over a year ago

This is what I was trying to do

pevik · Accepted Answer · 2020-04-08 11:19:47Z

0

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.

edited Apr 8, 2020 at 11:19

pevik

4,8513 gold badges40 silver badges51 bronze badges

answered Feb 29, 2016 at 23:58

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

1 Comment

SLaks Over a year ago

No; SOP would block that too.

Collectives™ on Stack Overflow

How to parse a JSON file without web request or web server?

5 Answers 5

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related