javascript - Load a JSON file without server - Stack Overflow

admin管理员组

文章数量:1391925

I have a big json file (+-10mb). I want to load in this json file (myjson.json) in a Javascript function located in a HTML webpage. I found a lot of answers on google that say things like "rename to myjson.js" and add var data = " yourjson" and in your html file include myjson.js and acces the variable data. This is not what I want. I want to load in the JSON file without renaming/altering it and without a webserver (No AJAX).

Can anyone help me?

  $.getJSON('myjson.json', function(myjson) {...}

Will not work.

Including css and js functions is so easy why is it so impossible to access a locally stored json file without a webserver?

Edit: json file first lines

[{"participants": ["a", "b"], "conversation": [{"sender": "b", "created_at": "2019-09-23T22:04:42.083698+00:00", "text": "xxx"},

Edit: adding my js for clarification

Edit: Can't because I'm on mobile and code formatting doesn't work here

I have a big json file (+-10mb). I want to load in this json file (myjson.json) in a Javascript function located in a HTML webpage. I found a lot of answers on google that say things like "rename to myjson.js" and add var data = " yourjson" and in your html file include myjson.js and acces the variable data. This is not what I want. I want to load in the JSON file without renaming/altering it and without a webserver (No AJAX).

Can anyone help me?

  $.getJSON('myjson.json', function(myjson) {...}

Will not work.

Including css and js functions is so easy why is it so impossible to access a locally stored json file without a webserver?

Edit: json file first lines

[{"participants": ["a", "b"], "conversation": [{"sender": "b", "created_at": "2019-09-23T22:04:42.083698+00:00", "text": "xxx"},

Edit: adding my js for clarification

Edit: Can't because I'm on mobile and code formatting doesn't work here

• javascript
• html
• offline

Share Improve this question Follow edited Oct 2, 2019 at 19:08 questionman asked Oct 2, 2019 at 18:56 questionmanquestionman 13933 silver badges99 bronze badges 10

• 2 So, you don't want to do any of the things that will work; you only want to do the things that won't work. And you want our help making the things that won't work work. Do I have that right? – Heretic Monkey Commented Oct 2, 2019 at 18:58
• 2 @Flimzy the same way a css file is loaded in. Isn't that possible? A local css file doesn't need a server, so why would a local json file need one? – questionman Commented Oct 2, 2019 at 18:59
• 1 CSS files are also loaded from a server. If you're loading it locally, then it's treating your local disk/system as a server. A "server" is any puter system that serves files. When loading locally, that means your local system. – Jonathan Hall Commented Oct 2, 2019 at 19:00
• 2 Can't be done for security reasons. (Since data read into JavaScript could be sensitive, and it would be awful if an HTML document attached to an email was double-clicked and then ran some JS to raid the user's hard disk for secrets to send back to the person who sent the email) – Quentin Commented Oct 2, 2019 at 19:06
• 1 XHR/Fetch are the only ways to load JSON into a document in the first place. Any answer specific to them is thus general to all means to load JSON into a document. (And XHR and Fetch apply the same security restrictions). So it is still a duplicate. – Quentin Commented Oct 2, 2019 at 19:07

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 3

Unfortunately, both XHR and the Fetch API are inextricably tied to HTTP, and cannot be used to load a resource from a relative path unless an HTTP server is involved. If you're loading your page via a file: URL, you won't be able to use XHR or Fetch to get that data.

There are only two methods available to you:

• Switch to JavaScript instead of regular JSON and use a <script> tag (as previously suggested to you in another answer)

• Allow the user to drag/drop the JSON file (or use <input type="file">) to get a File reference that you can then load.

I think you are looking for FileReader: https://developer.mozilla/en-US/docs/Web/API/FileReader

If you have it working, take a look at JSON.parse(): https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

本文标签： javascriptLoad a JSON file without serverStack Overflow