JSON and HTML

JSON (JavaScript Object Notation) is a lightweight data format commonly used to exchange data between a client and a server. In the context of HTML, JSON can be utilized to populate web pages dynamically, making your website more interactive and functional.

Loading JSON Data into HTML

To work with JSON in an HTML document, you can use JavaScript to fetch the JSON data and update the HTML content dynamically.

Example:

Suppose you have a data.json file:

{
  "title": "Welcome to The Coding College",
  "description": "Your hub for coding tutorials and resources."
}

In your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON and HTML Example</title>
</head>
<body>
    <h1 id="title"></h1>
    <p id="description"></p>

    <script>
        fetch('data.json')
            .then(response => response.json())
            .then(data => {
                document.getElementById('title').textContent = data.title;
                document.getElementById('description').textContent = data.description;
            })
            .catch(error => console.error('Error fetching JSON:', error));
    </script>
</body>
</html>

Embedding JSON Directly in HTML

Sometimes, you might want to include JSON directly in an HTML page. You can store JSON in a <script> tag with a specific type (application/json) and parse it with JavaScript.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded JSON Example</title>
</head>
<body>
    <div id="content"></div>

    <script type="application/json" id="data">
        {
            "heading": "Learn JSON with HTML",
            "content": "This is an example of using embedded JSON in an HTML document."
        }
    </script>

    <script>
        const jsonData = JSON.parse(document.getElementById('data').textContent);
        document.getElementById('content').innerHTML = `
            <h1>${jsonData.heading}</h1>
            <p>${jsonData.content}</p>
        `;
    </script>
</body>
</html>

JSON Data and HTML Tables

You can dynamically populate an HTML table with JSON data.

Example:

JSON data:

[
  { "name": "Alice", "age": 25, "role": "Developer" },
  { "name": "Bob", "age": 30, "role": "Designer" },
  { "name": "Charlie", "age": 35, "role": "Manager" }
]

HTML and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Table</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Role</th>
            </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>

    <script>
        const jsonData = [
            { "name": "Alice", "age": 25, "role": "Developer" },
            { "name": "Bob", "age": 30, "role": "Designer" },
            { "name": "Charlie", "age": 35, "role": "Manager" }
        ];

        const tableBody = document.getElementById('table-body');
        jsonData.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.role}</td>
            `;
            tableBody.appendChild(row);
        });
    </script>
</body>
</html>

Benefits of Using JSON in HTML

  1. Dynamic Content: JSON allows developers to update HTML elements without reloading the page.
  2. Data Interchange: Works seamlessly with APIs to fetch and display server-side data.
  3. Easy Parsing: JSON is simple to parse and manipulate with JavaScript.

For more tutorials on JSON and web development, visit The Coding College.

Leave a Comment