JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<script src="https://cdn.rawgit.com/enkidoo-ai/xml2json/f6ced45a/xml2json.min.js"></script>
<body>

  <h3>
    XML to JSON live demo
  </h3>
  
  <div class="wrapper">
    <div id="divXml">
      <span>Paste your XML here</span>
      <br />
      <textarea id="xmlInput"></textarea>
    </div>  
    <div id="divJson">
      <span>Get your JSON result here</span>
      <br />
      <textarea id="jsonOutput"></textarea>
    </div>
  </div>
  
  <input type="button" value="Convert!" onclick="convert()" />

</body>

CSS

.wrapper {
  width: 800px;
  height: 350px;
}

#divXml, #divJson {
  width: 350px;
  height: 300px;
  float: left;
}

#xmlInput, #jsonOutput {
  width: 350px !important;
  height: 300px !important;
  resize: none;
}

JavaScript

// Go to https://github.com/enkidootech/xml2json 
// to get the awesome converter !

// you can use this xml <person id=”1234” age=”30”><name>John Doe</name></person> 
// directly in the left textarea for the demos' purpose if you need it

window.convert = function() {
  
  // Get the XML in a string
  var xmlInput = document.getElementById('xmlInput').value;
  
  // Call the xml2json function
  var jsonOutput = xml2json(xmlInput);
  
  // Beautify the JSON if needed
  var beautifiedJson = JSON.stringify(jsonOutput, undefined, 4);
  
  // Show the json output in a textarea
  document.getElementById('jsonOutput').innerHTML = beautifiedJson;
}