Convert Xml To Json And Back Using Javascript

Are you looking to convert XML to JSON and vice versa using JavaScript? This article will guide you through the process step by step. Converting data formats can be a common task for developers working with web applications, and having the ability to switch between XML and JSON formats can be really handy. JavaScript provides powerful tools to make this conversion process straightforward.

To convert XML to JSON in JavaScript, you can make use of the built-in `DOMParser` and `XMLSerializer` APIs. Here's a simple example to help you understand the process:

Javascript

function xmlToJson(xml) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xml, 'text/xml');
  const json = {};
  
  function xmlNodeToJson(node) {
    if (node.hasChildNodes()) {
      node.childNodes.forEach(child =&gt; {
        if (child.nodeType === 1) {
          if (json[child.nodeName]) {
            if (!Array.isArray(json[child.nodeName])) {
              json[child.nodeName] = [json[child.nodeName]];
            }
            json[child.nodeName].push(xmlNodeToJson(child));
          } else {
            json[child.nodeName] = xmlNodeToJson(child);
          }
        }
      });
    } else {
      json[node.nodeName] = node.textContent.trim();
    }
    return json;
  }
  
  xmlNodeToJson(xmlDoc.firstChild);
  return json;
}

const xmlData = 'John30';
const jsonData = xmlToJson(xmlData);
console.log(jsonData);

For converting JSON to XML, you can utilize the `XMLSerializer` API. Here's a sample function that demonstrates this conversion:

Javascript

function jsonToXml(json) {
  const xmlDoc = new DOMParser().parseFromString('', 'text/xml');
  
  function jsonToXmlConverter(element, obj) {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        const child = xmlDoc.createElement(key);
        if (typeof obj[key] === 'object') {
          jsonToXmlConverter(child, obj[key]);
        } else {
          child.appendChild(xmlDoc.createTextNode(obj[key]));
        }
        element.appendChild(child);
      }
    }
  }
  
  jsonToXmlConverter(xmlDoc.firstChild, json);
  
  return new XMLSerializer().serializeToString(xmlDoc);
}

const jsonData = { name: 'John', age: 30 };
const xmlData = jsonToXml(jsonData);
console.log(xmlData);

By utilizing the functions provided above, you can easily convert XML data to JSON objects and vice versa in your JavaScript projects. Remember to handle edge cases and validate your inputs to ensure the conversion process runs smoothly.

We hope this guide helps you in efficiently converting XML to JSON and JSON to XML using JavaScript in your software development endeavors. Happy coding!

Related posts:

Contact Info