Convert XML to JSON in JavaScript

This post will discuss how to convert XML to JSON in JavaScript.

Converting XML to JSON in JavaScript is a common task that can be done using various methods and libraries. XML and JSON are both formats for storing and exchanging data, but they have different structures and syntaxes. XML uses tags and attributes to define elements and values, while JSON uses objects and arrays to define key-value pairs and lists. To convert XML to JSON in JavaScript, we need to parse the XML string, extract the relevant information, and construct the JSON object or string. Here are some of the most popular and easy-to-use options:

1. Using xml-js library

This is a library that provides various functions to convert between XML and JSON formats. We can install it using npm or yarn, and then import it in our code. To convert XML text to JSON text, we can use the xml2json() function, which takes an XML string and an optional options object as arguments, and returns a JSON string. Here’s an example:

// Import the library

var convert = require('xml-js');

// Read an XML file

var xml = require('fs').readFileSync('test.xml', 'utf8');

// Define some options

var options = {ignoreComment: true, alwaysChildren: true};

// Convert XML to JSON

var result = convert.xml2json(xml, options);

// Print the result

console.log(result);

Download Code

We can find more information and examples about this library here.

2. Using xml2js library

This is another library that allows us to parse XML into JavaScript objects. We can install it using npm or yarn, and then import it in our code. To convert XML text to a JavaScript object, we can use the parseString() function, which takes an XML string and a callback function as arguments, and passes the resulting object to the callback. Here’s an example:

// Import the library

var parseString = require('xml2js').parseString;

// Read an XML file

var xml = require('fs').readFileSync('test.xml', 'utf8');

// Convert XML to a JavaScript object

parseString(xml, function(err, result) {

// Print the result

console.log(result);

});

Download Code

We can find more information and examples about this library here.

3. Using `DOMParser` class

This is a built-in class in JavaScript that can parse XML strings into DOM trees. We can create an instance of this class and use the parseFromString() function, which takes an XML string and a MIME type as arguments, and returns a Document object. We can then traverse the DOM tree and extract the data we need. Here’s an example:

// Create a DOMParser instance

var parser = new DOMParser();

// Read an XML file

var xml = require('fs').readFileSync('test.xml', 'utf8');

// Parse XML into a Document object

var doc = parser.parseFromString(xml, 'text/xml');

// Get the root element

var root = doc.documentElement;

// Get the info elements

var infos = root.getElementsByTagName('info');

// Create an array to store the results

var result = [];

// Loop through the info elements

for (var i = 0; i < infos.length; i++)

{

// Get the current info element

var info = infos[i];

// Get the id attribute

var id = info.getAttribute('id');

// Get the field1 element

var field1 = info.getElementsByTagName('field1')[0];

// Get the field2 element

var field2 = info.getElementsByTagName('field2')[0];

// Get the field3 element

var field3 = info.getElementsByTagName('field3')[0];

// Create an object to store the data

var obj = {

id: id,

field1: field1.textContent,

field2: field2.textContent,

field3: field3.textContent,

};

// Push the object to the result array

result.push(obj);

}

// Print the result array

console.log(result);

Download Code

We can find more information and examples about this class here.

That’s all about converting XML to JSON in JavaScript.

Convert XML to JSON in JavaScript

1. Using xml-js library

2. Using xml2js library

3. Using DOMParser class

3. Using `DOMParser` class