✖

All TalkersCode Topics

Follow TalkersCode On Social Media

JavaScript Read Local JSON File Without jQuery

Last Updated : Feb 13, 2023

IN - JavaScript

JavaScript Read Local JSON File Without jQuery

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.

  1. With fetch() method
  2. 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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Create a <script> tag to add the JavaScript.
  8. Using the fetch() function that returns the data in JSON.
  9. 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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Create a <script> tag to add the JavaScript.
  8. Here, ‘Import’ is used to import read-only live binding and export to another module. mention the file type in JSON by assert
  9. 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.

Latest Tutorials