XML to JSON XML to JSON Converter (Client-side) XML to JSON ConverterConvert XML documents to JSON format — locally in your browser. Paste XML Upload File Fetch URL Enter XML: </i>';globalMessage.classList.add('text-red-600','font-medium');globalMessage.classList.remove('text-green-600','text-gray-600')}else if(type==='success'){iconSpan.innerHTML='<i class="fas fa-check-circle text-green-500 mr-1"></i>';globalMessage.classList.add('text-green-600','font-medium');globalMessage.classList.remove('text-red-600','text-gray-600')}else{iconSpan.innerHTML='<i class="fas fa-info-circle text-gray-400 mr-1"></i>';globalMessage.classList.remove('text-red-600','text-green-600','font-medium');globalMessage.classList.add('text-gray-600')} globalMessage.appendChild(iconSpan);globalMessage.appendChild(document.createTextNode(text));if(type!=='info'&&duration>0){setTimeout(()=>{globalMessage.innerHTML='';globalMessage.classList.remove('text-red-600','text-green-600','font-medium');globalMessage.classList.add('text-gray-600')},duration)}} function updatePreview(jsonObj){try{const spaces=indentSpaces.value==='0'?0:parseInt(indentSpaces.value);const jsonStr=JSON.stringify(jsonObj,null,spaces===0?undefined:spaces);jsonPreview.textContent=jsonStr.length>500?jsonStr.substring(0,500)+'...':jsonStr}catch(e){jsonPreview.textContent='Invalid object for preview'}} prettyPrintXmlBtn.addEventListener('click',()=>{let xml=xmlInput.value;if(!xml.trim())return;let formatted='';let indent=0;const lines=xml.split(/>\s*</);for(let i=0;i<lines.length;i++){let line=lines[i];if(!line.trim())continue;if(line.match(/^\/\w/))indent--;formatted+=' '.repeat(indent)+(i===0?'':'<')+line+(i===lines.length-1?'':'>')+'\n';if(line.match(/^<\w[^>]*[^\/]?>$/g)&&!line.match(/^<\w[^>]*\/>$/))indent++} xmlInput.value=formatted.trim()});function setActiveTab(active){[tabPaste,tabUpload,tabUrl].forEach(tab=>{tab.classList.remove('bg-violet-600','text-white');tab.classList.add('bg-white','text-gray-700','border')});document.querySelectorAll('.panel').forEach(p=>p.classList.add('hidden'));if(active==='paste'){tabPaste.classList.add('bg-violet-600','text-white');tabPaste.classList.remove('bg-white','text-gray-700');panelPaste.classList.remove('hidden')}else if(active==='upload'){tabUpload.classList.add('bg-violet-600','text-white');tabUpload.classList.remove('bg-white','text-gray-700');panelUpload.classList.remove('hidden')}else if(active==='url'){tabUrl.classList.add('bg-violet-600','text-white');tabUrl.classList.remove('bg-white','text-gray-700');panelUrl.classList.remove('hidden')}} tabPaste.addEventListener('click',()=>setActiveTab('paste'));tabUpload.addEventListener('click',()=>setActiveTab('upload'));tabUrl.addEventListener('click',()=>setActiveTab('url'));function updateUploadInfo(){const file=xmlFile.files[0];if(file){if(!file.name.toLowerCase().endsWith('.xml')&&!file.type.includes('xml')&&file.type!=='text/xml'&&file.type!=='application/xml'){showMessage('Please select an XML file.','error');xmlFile.value='';uploadFileInfo.classList.add('hidden');return} uploadFileName.textContent=file.name.length>30?file.name.substring(0,27)+'...':file.name;uploadFileInfo.classList.remove('hidden');const reader=new FileReader();reader.onload=(e)=>{currentXmlContent=e.target.result;currentFileName=file.name.replace(/\.xml$/i,'')+'.json';showMessage(`Loaded XML file`,'success')};reader.readAsText(file)}else{uploadFileInfo.classList.add('hidden');currentXmlContent=null}} xmlFile.addEventListener('change',updateUploadInfo);clearUpload.addEventListener('click',()=>{xmlFile.value='';uploadFileInfo.classList.add('hidden');currentXmlContent=null;showMessage('File cleared','info')});['dragenter','dragover','dragleave','drop'].forEach(ev=>{uploadDropZone.addEventListener(ev,(e)=>e.preventDefault())});['dragenter','dragover'].forEach(ev=>{uploadDropZone.addEventListener(ev,()=>{uploadDropZone.classList.add('border-violet-500','bg-violet-50')})});['dragleave','drop'].forEach(ev=>{uploadDropZone.addEventListener(ev,()=>{uploadDropZone.classList.remove('border-violet-500','bg-violet-50')})});uploadDropZone.addEventListener('drop',(e)=>{const dt=e.dataTransfer;const file=dt.files[0];if(file&&(file.name.toLowerCase().endsWith('.xml')||file.type.includes('xml'))){xmlFile.files=dt.files;updateUploadInfo()}else{showMessage('Please drop an XML file.','error')}});fetchUrlBtn.addEventListener('click',async()=>{const url=urlInput.value.trim();if(!url){showMessage('Please enter a URL','error');return} fetchUrlBtn.disabled=!0;showMessage('Fetching...','info');try{const response=await fetch(url);if(!response.ok)throw new Error(`HTTP ${response.status}`);const xmlText=await response.text();currentXmlContent=xmlText;currentFileName='remote_data.json';showMessage(`Loaded XML from URL`,'success')}catch(err){showMessage('Fetch error: '+err.message,'error');currentXmlContent=null}finally{fetchUrlBtn.disabled=!1}});function xmlToJson(xmlString,ignoreAttrsFlag,alwaysArrayFlag){const parser=new DOMParser();const xmlDoc=parser.parseFromString(xmlString,'application/xml');const parseError=xmlDoc.getElementsByTagName('parsererror');if(parseError.length){throw new Error('Invalid XML: '+parseError[0].textContent)} function convertElement(element){const obj={};const nodeName=element.nodeName;if(!ignoreAttrsFlag&&element.attributes&&element.attributes.length>0){obj['@attributes']={};for(let attr of element.attributes){obj['@attributes'][attr.nodeName]=attr.nodeValue}} const childNodes=element.childNodes;const childCount=childNodes.length;if(childCount===1&&childNodes[0].nodeType===Node.TEXT_NODE){const text=childNodes[0].nodeValue.trim();if(text)obj['#text']=text}else{const elementChildren=[];for(let child of childNodes){if(child.nodeType===Node.ELEMENT_NODE){elementChildren.push(child)}} if(elementChildren.length>0){for(let child of elementChildren){const childName=child.nodeName;const childObj=convertElement(child);if(alwaysArrayFlag){if(!obj[childName])obj[childName]=[];obj[childName].push(childObj)}else{if(obj.hasOwnProperty(childName)){if(!Array.isArray(obj[childName])){obj[childName]=[obj[childName]]} obj[childName].push(childObj)}else{obj[childName]=childObj}}}}} return obj} const root=xmlDoc.documentElement;const rootObj=convertElement(root);return{[root.nodeName]:rootObj}} convertBtn.addEventListener('click',()=>{let xmlText=null;let filename='data.json';if(currentXmlContent){xmlText=currentXmlContent;filename=currentFileName}else{xmlText=xmlInput.value.trim();if(!xmlText){showMessage('Please provide XML data (paste, file, or URL)','error');return} filename='converted.json'} const ignoreAttrsFlag=ignoreAttrs.checked;const alwaysArrayFlag=alwaysArray.checked;const spaces=indentSpaces.value==='0'?0:parseInt(indentSpaces.value);spinner.classList.remove('hidden');convertBtn.disabled=!0;showMessage('Converting...','info');setTimeout(()=>{try{const jsonObj=xmlToJson(xmlText,ignoreAttrsFlag,alwaysArrayFlag);const jsonOutput=JSON.stringify(jsonObj,null,spaces===0?undefined:spaces);updatePreview(jsonObj);const blob=new Blob([jsonOutput],{type:'application/json;charset=utf-8;'});const url=URL.createObjectURL(blob);const link=document.createElement('a');link.href=url;link.download=filename;document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);showMessage(`✅ Converted XML to JSON`,'success')}catch(err){showMessage('Conversion error: '+err.message,'error');jsonPreview.textContent='Error: '+err.message}finally{spinner.classList.add('hidden');convertBtn.disabled=!1}},50)});setActiveTab('paste');xmlInput.value='<catalog>\n <book id="101">\n <author>John Doe</author>\n <title>XML Guide</title>\n </book>\n <book id="102">\n <author>Jane Smith</author>\n <title>Advanced XML</title>\n </book>\n</catalog>'})()</script> </body></html><p></p><p>Converting XML to JSON is a common task in modern web development, data processing, and API integration. Both XML (eXtensible Markup Language) and JSON (JavaScript Object Notation) are widely used formats for storing and exchanging data, but JSON has become more popular due to its simplicity and lightweight structure.</p><h3 class="wp-block-heading">📌 What is XML?</h3><ul class="wp-block-list"><li>XML is a markup language used to store and transport data</li><li>It uses tags to define elements and structure</li><li>Commonly used in legacy systems and enterprise applications</li><li>Example: configuration files, SOAP APIs</li></ul><h3 class="wp-block-heading">📌 What is JSON?</h3><ul class="wp-block-list"><li>JSON is a lightweight data-interchange format</li><li>Easy to read and write for humans and machines</li><li>Uses key-value pairs</li><li>Widely used in REST APIs and modern web applications</li></ul><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🔄 Why Convert <a href="https://www.ilovepdf.com/" type="link" id="https://www.ilovepdf.com/">XML to JSON</a>?</h2><p>There are several reasons why developers prefer converting XML into JSON:</p><ul class="wp-block-list"><li>JSON is faster to parse in browsers and JavaScript environments</li><li>Lightweight format reduces data transfer size</li><li>Easier to integrate with modern APIs</li><li>Better readability and simpler structure</li><li>Supported natively in JavaScript</li></ul><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🧩 Basic Example of XML to JSON Conversion</h2><h3 class="wp-block-heading">XML Format:</h3><pre class="wp-block-preformatted"><user><br> <name>Rahul</name><br> <age>30</age><br> <city>Delhi</city><br></user></pre><h3 class="wp-block-heading">Converted JSON:</h3><pre class="wp-block-preformatted">{<br> "user": {<br> "name": "Rahul",<br> "age": 30,<br> "city": "Delhi"<br> }<br>}</pre><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">⚙️ Methods to Convert XML to JSON</h2><h3 class="wp-block-heading">1. Using Online Tools</h3><ul class="wp-block-list"><li>Quick and easy method</li><li>No coding required</li><li>Paste XML and get JSON instantly</li><li>Useful for beginners</li></ul><h3 class="wp-block-heading">2. Using JavaScript</h3><ul class="wp-block-list"><li>Ideal for web developers</li><li>Can be done using DOMParser or libraries</li></ul><p>Example:</p><pre class="wp-block-preformatted">const parser = new DOMParser();<br>const xml = `<user><name>Rahul</name></user>`;<br>const xmlDoc = parser.parseFromString(xml, "text/xml");const json = {<br> user: xmlDoc.getElementsByTagName("name")[0].textContent<br>};console.log(json);</pre><h3 class="wp-block-heading">3. Using Python</h3><ul class="wp-block-list"><li>Suitable for backend processing</li></ul><p>Example:</p><pre class="wp-block-preformatted">import xmltodict<br>import jsonxml_data = "<user><name>Rahul</name></user>"<br>data_dict = xmltodict.parse(xml_data)<br>json_data = json.dumps(data_dict)print(json_data)</pre><h3 class="wp-block-heading">4. Using PHP</h3><ul class="wp-block-list"><li>Useful for WordPress or server-side apps</li></ul><p>Example:</p><pre class="wp-block-preformatted">$xml = simplexml_load_string("<user><name>Rahul</name></user>");<br>$json = json_encode($xml);<br>echo $json;</pre><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🚧 Challenges in Conversion</h2><ul class="wp-block-list"><li>Handling attributes vs elements</li><li>Nested <a href="http://toolquicker.com" type="link" id="toolquicker.com">XML structures </a>can be complex</li><li>Data type differences (string vs number)</li><li>Repeated elements become arrays in JSON</li></ul><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">💡 Best Practices</h2><ul class="wp-block-list"><li>Always validate XML before converting</li><li>Use reliable libraries for large data</li><li>Maintain consistent structure</li><li>Test output JSON for accuracy</li><li>Handle special characters carefully</li></ul><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">🌐 Use Cases</h2><ul class="wp-block-list"><li>API data transformation</li><li>WordPress plugin data handling</li><li>Data migration between systems</li><li>Mobile app backend integration</li><li>SEO tools and analytics</li></ul><hr class="wp-block-separator has-alpha-channel-opacity"/><h2 class="wp-block-heading">✅ Conclusion</h2><p>XML to JSON conversion is an essential process in today’s development ecosystem. While XML is still used in many systems, JSON’s simplicity and efficiency make it the preferred choice for modern applications. By using the right tools and methods, you can easily convert XML data into JSON format and improve performance, readability, and compatibility across platforms.</p><div class="xs_social_share_widget xs_share_url after_content main_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content"><ul></ul></div></div></article><div id="comments" class="comments-area comment-form-position-below "><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/xml-to-json-converter/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://toolquicker.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"> Name* Email* Website Save my name, email, and website in this browser for the next time I comment.