[b]"How can I use JavaScript to load a JSON file from my desktop?"[/b] or [b]"What's the best way to load a JSON f

"JavaScript load JSON file from desktop – how does it work?"

hey guys, i'm trying to figure out how to use javascript load json file from desktop. like, i have a `data.json` on my pc and wanna read it in my js code.

i tried `fetch()` but it gives me CORS errors. is there a simple way to do this without setting up a server?

also, what about the FileReader API? does that work for local files? or do i need user to manually select the file every time?

any quick examples or tips would be awesome! thanks in advance

(ps. if this is a dumb question, pls go easy on me lol)

Hey! Yeah, the CORS error is a pain when trying to use javascript load json file from desktop directly.

One workaround is to use a local server like `live-server` (npm package) or even Python's `http.server`. Just run it in the folder where your JSON file is, and then `fetch()` will work fine.

FileReader API *can* work, but like you said, it requires the user to manually pick the file every time. Not ideal if you just wanna load it automatically.

Quick example for FileReader:
```js
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const json = JSON.parse(event.target.result);
console.log(json);
};
reader.readAsText(file);
});
```
Hope that helps!

lol not a dumb question at all! CORS blocks fetch from loading local files for security reasons.

If you *really* don’t wanna use a server, you could try the `--allow-file-access-from-files` flag in Chrome, but it’s messy and not recommended.

Another hacky way: convert your JSON to a JS object and just `import` it. Like, rename `data.json` to `data.js` and do:
```js
const data = { "your": "json", "here" }; // in data.js
import { data } from './data.js';
```
But yeah, a local server is the cleanest solution.

For javascript load json file from desktop, you might wanna check out JSON Server (https://github.com/typicode/json-server).

It’s super lightweight and lets you mock a REST API with your JSON file. Just install it, run it, and you can fetch your data like it’s a real backend.

Also, if you’re using VS Code, the Live Server extension is a lifesaver for this kinda thing. No config needed, just right-click and open with Live Server.

FileReader API is cool but yeah, it needs user interaction. No way around that for security reasons.

If you’re building something quick and dirty, you could just paste the JSON directly into your JS file as a variable. Not scalable, but gets the job done.

Otherwise, local server is the way. Here’s how to do it with Node:
```bash
npx http-server
```
Then access your file at `http://localhost:8080/data.json`. Easy peasy.

CORS errors are the worst, right? For javascript load json file from desktop, you could also try Electron if you’re building a desktop app. It has full filesystem access, so no CORS issues.

Otherwise, the `fetch()` workaround is either:
1. Use a local server (best practice).
2. Use `XMLHttpRequest` with `file://` (not reliable).

Here’s a quick local server setup:
```bash
python -m http.server 8000
```
Then hit `http://localhost:8000/data.json` in your fetch call.

If you’re just testing, you could use Firefox—it’s a bit more lenient with local file access. Still not perfect, but might get you past the CORS error temporarily.

For a proper solution, though, a local server is unavoidable. Tools like XAMPP or WAMP can help if you’re not comfy with command line stuff.

Also, if you’re using React/Vue, their dev servers usually handle this automatically. Just drop the JSON in the `public` folder and fetch it like it’s hosted.

Wow, thanks for all the replies! Didn’t expect so many options.

I tried the `python -m http.server` trick and it worked perfectly. Super simple fix for javascript load json file from desktop.

Still curious about the FileReader API though—does it work with Node.js scripts? Or is it strictly for browser JS? Might play around with that next.

Thanks again, y’all are legends!