0

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

questionman
  • 119
  • 2
  • 9
  • Where do you intend to load the file _from_ if there's no server? – Jonathan Hall Oct 02 '19 at 18:58
  • 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 Oct 02 '19 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 Oct 02 '19 at 18:59
  • Can you update with full code along with a the first 3 lines of json data, need to validate the json to debug (make sure it has the opening and closing [ ] array brackets if thats even present) ? – joe hoeller Oct 02 '19 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 computer system that serves files. When loading locally, that means your local system. – Jonathan Hall Oct 02 '19 at 19:00
  • Well, how would I do this with a json? I can load my css files fine without setting up a server and just the device treating my HDD as a server. I want the same, but wild a json, and no aditional setup. Just like including a css file – questionman Oct 02 '19 at 19:04
  • It's really not a duplicate of the other questions asking why XHR doesn't work. This question is a bit different... asking about ways to make it work. (Not strictly XHR.) – Brad Oct 02 '19 at 19:06
  • 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 Oct 02 '19 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 Oct 02 '19 at 19:07
  • @Quentin On Stack Overflow, it doesn't matter of the answers are the same, it matters that the questions are the same. – Brad Oct 02 '19 at 19:16

2 Answers2

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.

Brad
  • 159,648
  • 54
  • 349
  • 530
1

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

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

Hielke Walinga
  • 2,677
  • 1
  • 17
  • 30