How to convert XML into JSON with JS?

How to convert XML into JSON with JS?

You might have heard from the web developers that they have stuck in the program where they want to convert a one file format into another file format as per requirement.

In these things you might have heard that How to convert XML into  JSON?

Yeah, you have heard it sometime & still thinking why is it that much necessary?

The answer is both XML & JSON helps us to create web services, both have their independent parsers, in case of performance both are very powerful still you need to convert XML into JSON is because in bigger projector in bigger application, you might need a only JSON files & if you have a option to convert XML into JSON, then why you will work on the code for the same thing & which is so much time consuming? Right. So it's better to convert XML into JSON using a few lines of code.

Then How to convert XML into JSON?

We all know that XML is Extensible Markup Language which is readable to both machine& human & it is used to establish communication between servers & websites through web services. On the other hand JSON is also the same in working ways, JSON is a JavaScript Object Notation is a standard text-based format for representing structured data based on JavaScript Object format.

To provide a suitable data types & structure to XML we need to convert XML into JSON & to achieve it you need to follow the following steps:

1.Create a HTML Page

Let's create a one HTML file which has simple code& will help us to convert XML into JSON.

index.html

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: verdana;

}

#xml To JSON {

margin-top: 20px;line-height: 25px;

}

</style>

</head>

<body>

<h2>Convert XML to JSON </h2>

<div>

<h4>Write your XML code here:</h4>

<textarea id="xmlString" cols="55" rows="15"></textarea>

</div>

<button id="xmlToJSON">Convert XML to JSON</button>

</body>

2.Import JS library

We are going to use JavaScript to Convert XML into JSON. To accomplish this goal you need to add some external JavaScript files to your code.

These files are

<script type = "text/javascript" source="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type = "text/javascript" source ="https://cdn.rawgit.com/abdmob/x2js/master/xml2json.js"></script>

3.Add Script

Now, let's write a script for converting a XML added into the textarea to JSON. For it write the following script into index.html.

<script>

$(document).ready( function()

{$("#xmlToJSON").click(function()

{

var data = $(#xmlString).val();

var xmlData = "";

if(data != null && data.trim().length !=0)

{

try

{

xmlData = $.parseXML(data);

}catch(e)

{

throw e;

}

var x2js = new X2JS();

data = x2js.xmltojson(xmlData);

console.log(data);

}

});

});

</script>

4.Output

If you combine the above together you will get the code to convert XML into JSON.

If you want to use any XML file, you can use

<note><to>Jasmine

</to><from>Jani

</from><heading>Reminder</heading>

<body>Don't forget to read your book

</body>

</note>

To see how the above code works you have to use a developers tool of your browser & open a console tab in the same, as we are using console.log method to see the result.

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.