How to convert JSON to XML using JavaScript

Today in this blog you’ll learn how to convert JSON to XML using JavaScript. We used HTML CSS and JavaScript Plugin xml2json to create JSON to XML converter.

If you went to convert JSON to XML, then this tutorial article can help you to convert any JSON data to XML and also you can download this XML file.

How to convert JSON to XML using JavaScript [Source Codes]

This source code can help you to convert JSON to XML using JavaScript

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<h1>XML to JSON Convert</h1>		
	<div class="row">
		<div class="col">
			<h3>XML</h3>
			<input id="json_data"></input>
		</div>
		<div class="col">
			<h3>JSON</h3>
			<input id="xml_data"></input>
		</div>
	</div>
	<button id="j2x_btn" onClick="jtoxConvert()">JSON to XML</button>
	<button id="down_btn" onClick="jtoxDownload()">Download</button>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #05ae5e;
	color: #fff;
	text-shadow: 0 0 5px #000;

	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
.container{
	max-width: 1000px;
	width: 100%
}
.row{
	display: flex;
	justify-content: space-between;
}
.col{
	width: 48%;
}
textarea{
	width: 100%;
	height: 250px;
	border:5px solid #000;
	border-radius: 15px;
	padding: 10px;
	font-size: 16px;
	outline: 0;
	resize: none;
}
h1{
	font-size: 40px;
	text-align: center;
}
h3{
	font-size: 24px;
	margin:0 0 10px;
}
button{
	width: 300px;
	background-color: #000;
	display: block;
	margin:25px auto;
	color: #fff;
	padding:15px;
	border-radius: 15px;
	font-size: 18px;
	cursor: pointer;
}

JavaScript Code

Copy

function jtoxConvert(){

	var x2js = new X2JS;
	var jsonVla = document.getElementById("json_data").value
	//alert(jsonVla)
	var xmlMin = x2js.json2xml_str(JSON.parse(jsonVla))
	console.log(xmlMin)
	function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
		var formatted = '', indent= '';
		tab = tab || '\t';
		xml.split(/>\s*</).forEach(function(node) {
		    if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab'
		    formatted += indent + '<' + node + '>\r\n';
		    if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab;              // increase indent
		});
		return formatted.substring(1, formatted.length-3);
	}
	console.log(formatXml(xmlMin, " "))
	document.getElementById("xml_data").value = formatXml(xmlMin, " ")
}

function jtoxDownload(){
	var xmlVal = document.getElementById("xml_data").value
	var data_str = "data:text/xml;charset=utf-8," + encodeURIComponent(xmlVal);
	var anchor = document.createElement('a');
	anchor.setAttribute('href', data_str)
	anchor.setAttribute('download', "JsonToXml.xml");
	document.body.appendChild(anchor);
	anchor.click()
	anchor.remove()
}