| | <!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 Converter</title> |
| | </head> |
| | <body> |
| |
|
| | <h2>Paste JSON Below:</h2> |
| | <textarea id="jsonInput" rows="10" cols="50" placeholder="Paste JSON here"></textarea> |
| | <br><br> |
| | <button onclick="convertJson()">Convert JSON to HTML</button> |
| |
|
| | <h2>Output:</h2> |
| | <div id="output"></div> |
| |
|
| | <script> |
| | |
| | function jsonToHtml(data) { |
| | let html = ''; |
| | |
| | if (Array.isArray(data)) { |
| | html += '<ul>'; |
| | data.forEach(item => { |
| | html += `<li>${jsonToHtml(item)}</li>`; |
| | }); |
| | html += '</ul>'; |
| | } else if (typeof data === 'object' && data !== null) { |
| | for (const key in data) { |
| | if (Array.isArray(data[key]) || typeof data[key] === 'object') { |
| | html += `<div aria-label="${key}">${jsonToHtml(data[key])}</div>`; |
| | } else { |
| | html += `<p aria-label="${key}">${data[key]}</p>`; |
| | } |
| | } |
| | } else { |
| | html += data; |
| | } |
| | |
| | return html; |
| | } |
| | |
| | |
| | function convertJson() { |
| | const jsonInput = document.getElementById("jsonInput").value; |
| | try { |
| | const jsonData = JSON.parse(jsonInput); |
| | const htmlContent = jsonToHtml(jsonData); |
| | document.getElementById("output").innerHTML = htmlContent; |
| | } catch (error) { |
| | document.getElementById("output").innerHTML = "<p style='color: red;'>Invalid JSON. Please check the input.</p>"; |
| | } |
| | } |
| | </script> |
| |
|
| | </body> |
| | </html> |
| |
|
