XML to JSON converter with JavaScript

Creative Javascript | February 8, 2022

In this tutorial blog we will show you how to create XML to JSON converter using JavaScript

Video tutorial of XML to JSON converter with JavaScript

This tutorial video can help you to create XML to JSON converter with JavaScript

XML to JSON converter with JavaScript[Source Codes]

This source code can help you to create XML to JSON converter with JavaScript
JavaScript library source

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 Converter</h1>		
	<div class="row">
		<div class="col">
			<h3>XML</h3>
			<input id="xml_data"></input>
		</div>
		<div class="col">
			<h3>JSON</h3>
			<input id="json_data"></input>
		</div>
	</div>
	<button id="j2x_btn" onClick="xtojsConvert()">XML to JSON</button>
	<button id="down_btn" onClick="xtojsDownload()">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: #0bb0b6;
	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 xtojsConvert(){

	var x2js = new X2JS();
	var xmlVlaue = document.getElementById("xml_data").value
	console.log(xmlVlaue)
	var jsonValue = x2js.xml_str2json(xmlVlaue)
	console.log(jsonValue)
	document.getElementById("json_data").innerHTML = JSON.stringify(jsonValue, null, 2)

}

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