In this article we will show you the solution of JavaScript read local JSON file without jQuery, let us understand JSON first. The JSON stands for JavaScript Object Notation.
It is a lightweight data-exchanging format. It is used basically with API.
JSON is language-independent and supports all kinds of frameworks and languages.
We can read local JSON files using JavaScript without jQuery. We will see two different methods in this tutorial.
- With fetch() method
- Without fetch() method.
Step By Step Guide On JavaScript Read Local JSON File Without jQuery :-
At first, we need to create a local JSON file. For example, we created a JSON file named file.json in the same folder as the HTML file:
JSON file:
[ { "name" : "peter" , "city" : "tokyo" , "email": "peter@gmail.com" }, { "name" : "mary" , "city" : "london" , "email": "mary@gmail.com" }, { "name" : "thomas" , "city" : "paris" , "email": "thomas@gmail.com" } ]
Method 1
In this method, we are going to use the fetch() method. let us see the code first.
<!DOCTYPE html> <html lang = " en " > <head> <meta charset = " UTF - 8" > <meta http-equiv = " X-UA-Compatible " content = " IE=edge " > <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " > <title>javascript read local json file without jquery</title> <style> h1 { font-size : larger ; font-weight : bolder ; color : rgb(113, 221, 113) ; text-align : center ; } h3 { text-align : center ; } </style> </head> <body> <h1> TALKERSCODE </h1> <h3> javascript read local json file without jquery </h3> <script> fetch("file.json") .then(Response => Response.json()) .then(data => { console.log(data) }) </script> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page, create a <script> tag with a URL that is used to access the library of jQuery. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a <script> tag to add the JavaScript.
- Using the fetch() function that returns the data in JSON.
- We used .then and console.log() to display the JSON data.
Method 2
Here we used the import method. let us see the code first.
<!DOCTYPE html> <html lang = " en " > <head> <meta charset = " UTF - 8" > <meta http-equiv = " X-UA-Compatible " content = " IE=edge " > <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " > <title>JavaScript read local JSON file without jQuery</title> <style> h1 { font-size : larger ; font-weight : bolder ; color : rgb(113, 221, 113) ; text-align : center ; } h3 { text-align : center ; } </style> </head> <body> <h1> TALKERSCODE </h1> <h3> JavaScript read local JSON file without jQuery </h3> <script> import users from 'file.json' assert {type : 'json'}; console.log(users) ; </script> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page, create a <script> tag with a URL that is used to access the library of jQuery. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a <script> tag to add the JavaScript.
- Here, ‘Import’ is used to import read-only live binding and export to another module. mention the file type in JSON by assert
- Using console.log() to display the JSON file.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article, we are able to read local JSON files without jQuery using JavaScript.
I hope this article on JavaScript read local JSON file without jQuery helps you and the steps and method mentioned above are easy to follow and implement.