Skip to content

How to import JSON file in HTML

  • by

To import a JSON file in an HTML document, you can use JavaScript to fetch the JSON file and process its data. Here’s a step-by-step guide:

1. Create an HTML file and open it in a text editor or an integrated development environment (IDE).

2. Add a <script> tag within the <head> or <body> section of your HTML file. This is where you will write your JavaScript code.

3. Inside the <script> tag, write the JavaScript code to fetch and process the JSON file. Here’s an example code snippet:

<script>
  // Function to fetch and process the JSON file
  function fetchJSONFile(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.overrideMimeType("application/json");
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send(null);
  }

  // Usage
  fetchJSONFile("your_file.json", function (response) {
    var data = JSON.parse(response);
    // Process the JSON data
    console.log(data);
  });
</script>

In the fetchJSONFile() function, you can replace "your_file.json" with the path to your JSON file.

4. Save the HTML file.

5. Place your JSON file in the same directory as the HTML file, or update the file path in the fetchJSONFile() function accordingly if the JSON file is located elsewhere.

6. Open the HTML file in a web browser. The JavaScript code will fetch the JSON file and log its contents to the console. You can modify the code inside the fetchJSONFile() function to process the JSON data as per your requirements.

Note: If you’re running the HTML file from a local file system (using the file:// protocol), some web browsers may block the cross-origin request. In that case, you’ll need to run a local web server to serve the HTML file, or upload the files to a web server.

Import JSON file in HTML example

Simple example code.

<!DOCTYPE html>
<html>
<head>
  <title>Import JSON File Example</title>
  <script>
    function fetchJSONFile(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.overrideMimeType("application/json");
      xhr.open("GET", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          callback(xhr.responseText);
        }
      };
      xhr.send(null);
    }

    // Usage
    fetchJSONFile("data.json", function (response) {
      var data = JSON.parse(response);
      // Process the JSON data
      displayData(data);
    });

    function displayData(data) {
      // Access and display the JSON data on the page
      var output = document.getElementById("output");
      output.innerHTML = JSON.stringify(data, null, 2);
    }
  </script>
</head>
<body>
  <h1>Import JSON File Example</h1>
  <div id="output"></div>
</body>
</html>

Output:

How to import JSON file in HTML

When you open the HTML file in a web browser, it will fetch the JSON file, process its data, and display it within the <div> element with the “output” id.

Remember to replace "data.json" with the correct path to your JSON file.

Comment if you have any doubts or suggestions on this Js Html code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading