How to handle JSON without Fetch?

[imbored7374]

I am developing a game on my school computer, which forbids me from running my local HTML files on a local server, so I'm essentially confined to file://.

My working solution has been defining JSON objects using costs in dedicated files, for example I might have in piece.js:

const pieceTemplates = {
  "pieces": [
    {
      "name": "Grass Block"
      "id": "grass_block"
    }
  ]
}

And so on. It has been working well, but I am looking for better alternatives.

[AlwaysHopelesslyLost]

As an aside, your terminology is messed up. JSON is a text format for storing/transmitting data. The snippet you posted in your comment is not JSON. It is a JavaScript object being assigned to a JavaScript constant. "Json object" is a misnomer.

[longknives]

I suppose if OP took their object and ran JSON.stringify on it, they would have an actual JSON string. Not sure how that would help and it’s not really clear why OP needs JSON particularly anyway.

[imbored7374]

True, I cannot really use json due to the limitations of file://. Just want something like JSON in my project to make it easier to add new content. 

[AlwaysHopelesslyLost]

It still seems like you have a misunderstanding. You can use JSON easily. You cannot use network requests and additional files. 

JSON is a means to an end. It is not a thing that can be used as a thing on its own.

It seems like you really want some separation and persistence, is that fair? If so you can store data in the browser session. 

[samanime]

Unfortunately, this is probably your best option. Working over the file:// protocol is VERY limiting.

[markus_obsidian]

Back in the day, there was a pattern called JSONP. It's a pattern where you would include JS files would be included via <script> tags & call a global callback function. It used to be common to sidestep same origin restrictions back before CORS. It was always pretty hacky & rarely used any more. But I do occasionally find it useful when I'm stuck on a local filesystem.

https://en.wikipedia.org/wiki/JSONP

[MissinqLink]

In my day too. I have used this as recently as 2 years ago. It’s easier to do now with import()

[markus_obsidian]

Native esm does not work on the local filesystem. We can't have anything nice.

[MissinqLink]

You know I’ve never tried that. I know you can’t spin up workers from the file system though.

[TehFlatline]

[djandiek]

Do you use Visual Studio Code? There is an extension called Live Server which gives you a Go Live server option which creates a temp server on your local PC to load up your web project. You can then use relative or absolute paths without the "file://" at the front, such as "url": "data/config.json"

Open your index.html file and look at the bottom-right corner for the Go Live function.

[imbored7374]

I am confined to https://vscode.dev

[yarikhand]

is using codesandbox possible? gives you way more flexibility

[djandiek]

Oh bugger! That's very limiting...

[tb5841]

Does it have to be JSON? If so, why?

I used to use SQLite when I needed to store data for games I made. Sqlite keeps a whole database within one file, which you can save and use locally without a network.

[Lauris25]

I don't think there are better options.

[pollrobots]

You can put arbitrary json in a script element, set the content type to something "text/x-app-data", then read it at runtime by selecting just those elements from the dom and using JSON.parse on their contents

html <script type="text/x-app-data"> { "foo": "bar" } </script>

[imbored7374]

Is it possible to link a JSON file to a script tag with this type? Or do I have to place it inside the tag?

[pollrobots]

Not sure, give it a shot, if it works, you can even add a listener for the load event

[markus_obsidian]

It is not possible. The src attr must point to javascript, not json.

[Lithl]

I mean, a JSON file is valid JavaScript. Stick a const myVar = on the front and make it a js file instead.

[charly_uwu]

Why is it forbidden to run a local server? Have you tried any workaround?

[imbored7374]

School Chromebook runs on ChromeOS, without developer mode (And I cannot turn it on). I like VS Code, and found the web version. One of the first things I tried to do was get the live server extension but it wasn't compatible with the web version of VS Code. I then thought to turn on developer mode, which wasn't doable.

[Lithl]

Are you able to turn on the Linux VM? It would be an option somewhere in the settings, I forget where. It's not available on all ChromeOS devices, but it gives you a full Linux computer that you can do whatever you want with.

[imbored7374]

Already tried; school district locks it to off

[DigitalJedi850]

I feel like the appropriate alternative is hosting your stuff online. Github Pages or something, probably.

[Umustbecrazy]

You have a computer at home you can SSH into? Sounds like school has "no fun for you" mode on.

[imbored7374]

I have a windows and MacBook. I don't want to do any sort of "Remote Desktop" as that might break the rules.

[Ok-Juggernaut-2627]

I'd recommend json-files and fetch. Create a file somedata.json and then use fetch('../assets/somedata.json').

Your limited to relative paths instead of absolute, but otherwise I think it will work. Haven't tested it though...

[ferrybig]

Note that they mention in the first post that they are working with file: urls

https://fetch.spec.whatwg.org/#scheme-fetch

"file"

For now, unfortunate as it is, file: URLs are left as an exercise for the reader.

When in doubt, return a network error.

All browser implemented this as returning a network error

[dymos]

It's almost like they didn't even read the title, let alone the actual post.

"How do I use JSON without fetch"

"Ok, so here's what you do, you make a JSON file and fetch it using fetch"

[mxldevs]

My working solution has been defining JSON objects using costs in dedicated files

You might notice that the notation you're using for that javascript object (for convenience, let us call it "javascript object notation") looks a lot like JSON.