| <!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> |
|
|
