DEV Community

Roshan Shambharkar
Roshan Shambharkar

Posted on • Updated on

How To Read a local JSON File Using Fetch API

#javascript #webdev #beginners #tutorial

How To Read a local JSON File Using Fetch API

Can I use Fetch on a local JSON file?

  • The standard method that can be used to read

  • JSON files (either locally or uploaded to a server) is the Fetch API.

  • Use the same syntax for both. The only difference is the URL

First Create A .JSON file With name test.json

{
"countries":[
{
   "name": "Indonesia",
   "capital": "Jakarata"
},
{
   "name": "Philippines",
   "capital": "Manila"
  }
 ]
}
Enter fullscreen mode Exit fullscreen mode

Then create JavaScript file give name fetch.js

fetch("test.json")
.then(response => response.json())
.then(data => showInfo(data));

function showInfo(data) {
console.table(data.countries);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas • • Edited

Although I admit I didn't ever think this would work, I should ask why is even needed. If you are in a browser, you cannot fetch from the user's file system, and definitely cannot from the server's file system. On the other hand, if you are doing NodeJS, you have the fs module to actually read the file system.

And in both cases, you can statically import JSON.

For the browser (in React, for example):

import myJson from "./myJson.json";
Enter fullscreen mode Exit fullscreen mode

For NodeJS:

import myJson from "./myJson.json" assert { type: 'json' };
Enter fullscreen mode Exit fullscreen mode
Collapse
 
roshan_100kar profile image
Roshan Shambharkar •

agreed

Collapse
 
tobyschonrock profile image
toby-schonrock •

Ah thanks this is exactly what I needed.

Collapse
 
saeedjhn profile image
saeedjhn •

In node:
err::

TypeError: Failed to parse URL from test.json
[cause]: TypeError [ERR_INVALID_URL]: Invalid URL
input: 'test.json',
code: 'ERR_INVALID_URL'

solution?

Collapse
 
webjose profile image
José Pablo Ramírez Vargas •

Read the other comment.

Read next

melihs profile image

Web Development with Web Components: The New Way of Modularity

Melih Şahin -

titusefferian profile image

How to use Stable Diffusion 3 to generate a similar image.

Titus Efferian -

ashsajal profile image

JavaScript Event Loop Explained in 1 minute.

Ashfiquzzaman Sajal -

tere_joe profile image

Understanding CSS Cascade, Selectors and Specificity

Nzeamalu Nkechinyere Tere-joe -