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:
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