XML to JSON Tool Code is written in Javascript, HTML and css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML to JSON Tool</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 800px;
width: 90%;
}
h1 {
text-align: center;
color: #4CAF50;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.output {
background: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
white-space: pre-wrap;
}
.error {
color: red;
font-size: 14px;
}
.controls {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.controls button {
flex: 1;
}
@media (max-width: 600px) {
textarea {
height: 120px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>XML to JSON Converter</h1>
<textarea id="xmlInput" placeholder="Paste your XML here..."></textarea>
<div class="controls">
<button id="convertBtn">Convert to JSON</button>
<button id="clearBtn">Clear</button>
<button id="downloadBtn">Download JSON</button>
</div>
<div id="outputSection">
<h3>Output:</h3>
<div id="jsonOutput" class="output"></div>
<p id="error" class="error"></p>
</div>
</div>
<script>
document.getElementById('convertBtn').addEventListener('click', () => {
const xmlInput = document.getElementById('xmlInput').value;
const jsonOutput = document.getElementById('jsonOutput');
const errorOutput = document.getElementById('error');
jsonOutput.textContent = '';
errorOutput.textContent = '';
try {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlInput, 'application/xml');
if (xmlDoc.getElementsByTagName('parsererror').length) {
throw new Error('Invalid XML format.');
}
const obj = xmlToJson(xmlDoc);
jsonOutput.textContent = JSON.stringify(obj, null, 2);
} catch (e) {
errorOutput.textContent = e.message;
}
});
document.getElementById('clearBtn').addEventListener('click', () => {
document.getElementById('xmlInput').value = '';
document.getElementById('jsonOutput').textContent = '';
document.getElementById('error').textContent = '';
});
document.getElementById('downloadBtn').addEventListener('click', () => {
const jsonOutput = document.getElementById('jsonOutput').textContent;
if (!jsonOutput) {
alert('No JSON to download.');
return;
}
const blob = new Blob([jsonOutput], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'converted.json';
link.click();
URL.revokeObjectURL(url);
});
function xmlToJson(xml) {
const obj = {};
if (xml.nodeType === 1) { // Element
if (xml.attributes.length > 0) {
obj['@attributes'] = {};
for (let j = 0; j < xml.attributes.length; j++) {
const attribute = xml.attributes.item(j);
obj['@attributes'][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType === 3) { // Text
return xml.nodeValue.trim();
}
if (xml.hasChildNodes()) {
for (let i = 0; i < xml.childNodes.length; i++) {
const item = xml.childNodes.item(i);
const nodeName = item.nodeName;
if (typeof obj[nodeName] === 'undefined') {
const nodeValue = xmlToJson(item);
if (nodeValue) {
obj[nodeName] = nodeValue;
}
} else {
if (!Array.isArray(obj[nodeName])) {
obj[nodeName] = [obj[nodeName]];
}
const nodeValue = xmlToJson(item);
if (nodeValue) {
obj[nodeName].push(nodeValue);
}
}
}
}
return Object.keys(obj).length ? obj : null;
}
</script>
</body>
</html>