How to Connect HTML with JSON Using JavaScript: A Beginner’s Guide

2 min readOct 26, 2023

Web development is an exciting journey, and one of the first steps in creating dynamic web pages is learning how to connect your HTML with JSON data. In this beginner’s guide, we’ll walk through a simple example to help you get started.

Prerequisites

Before we begin, you’ll need the following:

Basic knowledge of HTML and JavaScript.
A code editor (e.g., Visual Studio Code).
A web browser.

Step 1: Create Your HTML Structure

Let’s start by setting up the HTML structure for displaying JSON data. In this example, we’ll create a basic HTML page with a <div> where our data will be displayed. Here's a simple HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON to HTML Example</title>
</head>
<body>
    <div id="dataDisplay">
        <!-- JSON data will be displayed here -->
    </div>
    <script src="script.js"></script>
</body>
</html>

In this HTML structure, we’ve set up a <div> element with the id "dataDisplay" where we will display our JSON data.

Step 2: Create Your JSON Data

Now, let’s create a simple JSON file with the data you want to display. For our example, we’ll use a JSON file named data.json with the following structure:

{
    "name": "John Doe",
    "age": 30,
    "city": "Anytown"
}

This JSON data represents a person’s name, age, and city.

Step 3: Write JavaScript to Populate the HTML

Now, let’s create a JavaScript file (script.js) to fetch the JSON data and display it in our HTML:

document.addEventListener("DOMContentLoaded", function () {
    fetch('data.json')
        .then(response => response.json())
        .then(data => {
            const dataDisplay = document.getElementById("dataDisplay");

            // Create HTML elements to display the JSON data
            const nameElement = document.createElement("p");
            nameElement.textContent = "Name: " + data.name;

            const ageElement = document.createElement("p");
            ageElement.textContent = "Age: " + data.age;

            const cityElement = document.createElement("p");
            cityElement.textContent = "City: " + data.city;

            // Append the elements to the "dataDisplay" div
            dataDisplay.appendChild(nameElement);
            dataDisplay.appendChild(ageElement);
            dataDisplay.appendChild(cityElement);
        })
        .catch(error => console.error("Error fetching JSON data:", error));
});

This JavaScript code uses the fetch API to load the JSON data from data.json. It then creates HTML elements to display the JSON data (name, age, and city) and appends them to the "dataDisplay" div.

Step 4: Test Your Web Page

Open your HTML file in a web browser, and you’ll see the JSON data displayed on the page. Congratulations, you’ve successfully connected your HTML with JSON using JavaScript!

This is just the beginning of your web development journey. With this foundational knowledge, you can explore more advanced features, create interactive web applications, and build dynamic websites that engage your users.

Dizzpy | Happy coding! 🖥️🥰