All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Load JSON File Into JavaScript

Last Updated : Sep 5, 2023

Load JSON File Into JavaScript

In this article we will show you the solution of load JSON file into JavaScript, let's begin with comprehending JSON. JSON is short for JavaScript Object Notation.

It is a small-sized format for data sharing. It mostly utilizes API. JSON is language-independent and supports a wide range of frameworks and languages.

In this tutorial, we will use fetch API to load JSON files. For interacting with and accessing protocol parts like requests and answers, the Fetch API provides a JavaScript interface.

Step By Step Guide On Load JSON File Into JavaScript :-

At first, we have to write the JSON file. To get the JSON file into an HTML file we have to connect the HTML file to the live server first.

JSON File

{
    "details" : [
    {
        "id" : 1 ,
        "name" : "Rohan" ,
        "country" : "England" ,
        "email": "Rohan@xyzmail.com"
    },
    {
        "id" : 2 ,
        "name" : "Ankita" ,
        "country" : "France" ,
        "email": "ankita@xyzmail.com"
    },
    {
        "id" : 3 ,
        "name" : "sourabh" ,
        "country" : "India" ,
        "email": "sourabh@xyzmail.com"
    },
    {
        "id" : 4 ,
        "name" : "Sree" ,
        "country" : "Germany" ,
        "email": "Sree@xyzmail.com"
    }
]
}

Now let us see the JavaScript code first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>load JSON file into JavaScript</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> load json file into JavaScript </h3>
    </center>
    <h3>list of names: </h3>
    <ul>
    </ul>
    <script>
        const list = document.querySelector('ul') ;
        fetch('file.json')
        .then(res => res.json())
        .then(data => {
            data.forEach(post => {
                list.insertAdjacentHTML('beforeend', `<li>${post.name}</li>`)
            }) ;
        }) ;
    </script>
</body>
</html>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. In order to style the HTML page, we'll utilize an external CSS file
  6. using <style> tag to add CSS
  7. <h1> tag used to add a heading close it with </h1> tag
  8. <h3> used to add the list title and also create a <ul> tag to display the JSON data into it
  9. Create a <Script> tag to write JavaScript within it.
  10. Using const to create a constant list to get the <ul> tag using document.querySelector()
  11. Now using fetch() to fetch the data from file.json
  12. Using then() that returns a promise with response of json()
  13. Again using then() for data with foreach loop with post element
  14. Using insertAdjacentHTML() to display the Json data into the <ul> tag.

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know how to load JSON files into JavaScript.

I hope this article on load JSON file into JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪