JSON HTML

Using JSON data to create dynamic HTML content

🌐 What is JSON HTML?

JSON HTML refers to using JSON data to dynamically generate HTML content. This is commonly used to display data from APIs, databases, or user input in web pages. 


// JSON data
const user = {
    "name": "Sarah",
    "age": 28,
    "job": "Developer"
};

// Create HTML from JSON
document.body.innerHTML = `<h1>Hello ${user.name}!</h1>`;

Creating Dynamic HTML

📋

Lists & Tables

Generate HTML lists and tables from JSON arrays

🎨

Template Strings

Use template literals to create HTML templates

🔄

Real-time Updates

Update HTML content when JSON data changes

🔹 Simple JSON to HTML

Convert JSON data into HTML elements: 

<!DOCTYPE html>
<html>
<body>
    <div id="content"></div>

    <script>
        // JSON data
        const product = {
            "name": "Laptop",
            "price": 999,
            "brand": "TechCorp",
            "inStock": true
        };

        // Create HTML
        const html = `
            <div class="product">
                <h2>${product.name}</h2>
                <p>Brand: ${product.brand}</p>
                <p>Price: $${product.price}</p>
                <p>Status: ${product.inStock ? 'In Stock' : 'Out of Stock'}</p>
            </div>
        `;

        document.getElementById('content').innerHTML = html;
    </script>
</body>
</html>

Output:

Laptop

Brand: TechCorp

Price: $999

Status: In Stock

🔹 JSON Array to HTML List

Generate HTML lists from JSON arrays: 

<!DOCTYPE html>
<html>
<body>
    <div id="user-list"></div>

    <script>
        // JSON array
        const users = [
            {"id": 1, "name": "Alice", "email": "[email protected]"},
            {"id": 2, "name": "Bob", "email": "[email protected]"},
            {"id": 3, "name": "Charlie", "email": "[email protected]"}
        ];

        // Generate HTML list
        let html = '<ul>';
        users.forEach(user => {
            html += `<li>${user.name} - ${user.email}</li>`;
        });
        html += '</ul>';

        document.getElementById('user-list').innerHTML = html;
    </script>
</body>
</html>

Output:

🔹 JSON to HTML Table

Create tables from JSON data: 

<!DOCTYPE html>
<html>
<body>
    <div id="data-table"></div>

    <script>
        // JSON data
        const employees = [
            {"name": "John", "department": "IT", "salary": 50000},
            {"name": "Jane", "department": "HR", "salary": 45000},
            {"name": "Mike", "department": "Sales", "salary": 48000}
        ];

        // Create table HTML
        let tableHTML = `
            <table border="1" style="border-collapse: collapse;">
                <tr>
                    <th>Name</th>
                    <th>Department</th>
                    <th>Salary</th>
                </tr>
        `;

        employees.forEach(emp => {
            tableHTML += `
                <tr>
                    <td>${emp.name}</td>
                    <td>${emp.department}</td>
                    <td>$${emp.salary}</td>
                </tr>
            `;
        });

        tableHTML += '</table>';
        document.getElementById('data-table').innerHTML = tableHTML;
    </script>
</body>
</html>

Output:

Name Department Salary
John IT $50000
Jane HR $45000
Mike Sales $48000

🔹 Interactive Example: Form Data to HTML

Convert form input to JSON and display as HTML: 

<!DOCTYPE html>
<html>
<body>
    <form id="userForm">
        <input type="text" id="name" placeholder="Name" required>
        <input type="email" id="email" placeholder="Email" required>
        <button type="submit">Add User</button>
    </form>
    
    <div id="output"></div>

    <script>
        document.getElementById('userForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data as JSON
            const userData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                timestamp: new Date().toLocaleString()
            };
            
            // Create HTML from JSON
            const html = `
                <div style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;">
                    <h3>${userData.name}</h3>
                    <p>Email: ${userData.email}</p>
                    <small>Added: ${userData.timestamp}</small>
                </div>
            `;
            
            document.getElementById('output').innerHTML += html;
            this.reset(); // Clear form
        });
    </script>
</body>
</html>

🧠 Test Your Knowledge

Which method is best for creating HTML from JSON arrays?