Reading JSON Files in JavaScript: Fetch, Import, and require
JavaScript offers multiple ways to read JSON depending on environment (browser vs Node.js) and module system (CommonJS vs ESM). Here is the complete guide.
Method 1: fetch() in the Browser
In browser-based JavaScript, fetch() is the standard way to load JSON from a URL. const response = await fetch("/data.json"); const data = await response.json(); fetches the file and parses it as JSON. The response.json() method handles parsing and returns a Promise resolving to the parsed value.
Always handle fetch errors: check response.ok before calling response.json(). A 404 response does not throw an error — it resolves with ok: false. Wrap in try/catch to handle network failures. Combine both: if (!response.ok) throw new Error(response.statusText); const data = await response.json();
Method 2: import in ES Modules
Modern bundlers (webpack, Rollup, Vite) and Node.js 22+ support importing JSON directly as ES modules: import data from "./config.json" assert { type: "json" }. This bundles the JSON into the application at build time, making it available as a JavaScript object without a runtime fetch.
Static imports are best for configuration data, translation strings, and other JSON that does not change at runtime. The data is parsed once at load time and cached. Dynamic imports work for on-demand loading: const data = await import("./large-data.json", { assert: { type: "json" } }).
Method 3: require() in Node.js (CommonJS)
In Node.js CommonJS modules, require("./data.json") synchronously reads and parses a local JSON file and returns the parsed object. The result is cached — subsequent require() calls for the same file return the cached object without re-reading the file.
For reading JSON files from arbitrary paths at runtime (not hardcoded module paths), use fs.readFile() with JSON.parse(): const raw = await fs.promises.readFile(path, "utf8"); const data = JSON.parse(raw). This is appropriate when the file path is dynamic or user-provided.
Reading JSON from HTTP APIs
When reading JSON from an HTTP API in Node.js, use a library like axios or the built-in fetch (available in Node.js 18+): const response = await fetch(url); const data = await response.json(). Axios provides a more ergonomic API with automatic JSON parsing: const { data } = await axios.get(url).
Always validate the structure of JSON read from external APIs — the schema may change without notice. Use a validation library like zod to define and enforce the expected shape: const user = UserSchema.parse(await response.json()) throws a clear error if the response does not match the expected structure.
Try JSON Reader Free Online
No sign-up required. 100% client-side — your data never leaves your browser.
Open JSON Readerarrow_forwardFrequently Asked Questions
What is the best way to read a local JSON file in Node.js?
For static files in your project, use require("./file.json") in CommonJS or import in ESM. For dynamic paths, use fs.promises.readFile(path, "utf8") followed by JSON.parse().
Can I read JSON from a CORS-restricted URL with fetch?
No. CORS restrictions apply to fetch() requests. The JSON endpoint must include the correct Access-Control-Allow-Origin header. For testing, use a proxy or run a local server.
Does require() re-read the JSON file on every call?
No. Node.js caches the result of require() after the first call. The file is read and parsed once; subsequent calls return the cached object. Clear the require cache to force a re-read.