HTML Code to JSON Converter App Using HTML, CSS, and JavaScript

Last Updated : 09 Aug, 2024

HTML tables are a common way to represent structured data on web pages, but transforming this data into a JSON format can be troublesome. JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate.

We will be creating the HTML Code for the JSON Converter tool. The converter is designed to analyze HTML code, identify tables within it, and convert the table data into JSON format.

Prerequisites

Approach

Create an HTML structure that includes input fields for the user to enter the HTML code, a button to trigger the conversion, and an output field to display the JSON result.
Apply CSS styles to create an appealing layout for the app, making it visually engaging and user-friendly.
Create a function using JavaScript that converts data into JSON when the user clicks the "Convert to JSON" button.

Example: In this example, we will be demonstrating a JSON Converter app which converts the data into JSON format.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>HTML to JSON Converter</title>
</head>

<body>
    <div>
        <h1>HTML to JSON Converter</h1>
        <div class="container">
            <div class="input-container">
                <textarea id="htmlInput" placeholder="Paste your HTML code here">
              </textarea>
                <div>
                    <button onclick="convertToJson()">Convert to JSON</button>
                    <button onclick="clearFields()">Refresh</button>
                </div>
            </div>
            <textarea id="jsonOutput" readonly></textarea>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #4caf50;
}

h1 {
    text-align: center;
    color: white;
}

.container {
    text-align: center;
    width: 1200px;
    justify-content: space-between;
    display: flex;
}

.input-container {
    margin-bottom: 20px;
}

textarea {
    width: 500px;
    height: 500px;
    padding: 10px;
    margin-top: 5px;
}

button {
    background-color: white;
    color: #4caf50;
    padding: 10px 20px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    border-color: #4caf50;
}

button:hover {
    font-weight: bold;
}

Javascript

const htmlInput = document.getElementById('htmlInput');
const jsonOutput = document.getElementById('jsonOutput');

// Function to convert table data into JSON
const convertToJson = () => {
    const htmlCode = htmlInput.value;
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlCode, 'text/html');
    const table = doc.querySelector('table');

    if (table) {
        const jsonData = extractTableData(table);
        if (jsonData) {
            const jsonString = JSON.stringify(jsonData, null, 2);
            jsonOutput.innerHTML = jsonString.replace(/, /g, ',<br>&nbsp;&nbsp;');
            // Formatting JSON for readability
        } else {
            jsonOutput.innerText = 'Table is missing some data.';
        }
    } else {
        jsonOutput.innerText = 'No table present in the given code.';
    }
};

// Function to extract table data and convert it to JSON format
const extractTableData = (table) => {
    const data = [];
    const headers = [];

    const headerCells = table.rows[0].querySelectorAll('th');
    for (const cell of headerCells) {
        headers.push(cell.innerText.trim());
    }

    for (let i = 1; i < table.rows.length; i++) {
        const tableRow = table.rows[i];
        const rowData = {};

        for (let j = 0; j < tableRow.cells.length; j++) {
            const cell = tableRow.cells[j];
            rowData[headers[j]] = cell.innerText.trim();
        }

        if (Object.values(rowData).some(value => value !== "")) {
            data.push(rowData);
        }
    }

    return headers.length === 0 || data.length === 0 ? null : data;
};

// Function to clear user input and output
const clearFields = () => {
    htmlInput.value = '';
    jsonOutput.innerHTML = '';
};