Converting XML to JSON using Recursion

The other day, I was working on an app which needed to fetch data from a third party rest api, and what happened next is the thing of the one of the worst nightmares of a JavaScript developer.

The server sent back response in.. gasp.. XML instead of JSON like any sane rest api would do.

So, I came up with a way to easily convert XML into JavaScript Object. Here’s an example of the data I was trying to read.

Keep in mind that this code makes use of WebAPIs so it is not available in server side javascript like NodeJS. This works great for front end applications like React or Angular.

The format of XML is generally something like this:

I want the ouput to look a little something like this:

Since, XML has a lot of nested tags, this problem is a perfect example of a practical application of recursion.

Before we begin to code, we need to understand something called the DOMParser Web API.

According to the MDN documentation,

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM TREE.

In simple words, it converts and XML string into a DOM Tree. Here’s how it works.

Lets say we have an some XML stored in a string, strxml. We can parse the data in it as a DOM tree like this:

Now that we have got the basics right. Let’s start writing the psuedo code.

Initialize variable jsonResult is empty object. 
If scrDOM has no children nodes:
    return innerHTML of the DOM.  // This is our base case.
For each childNode in children nodes:
    Check if childNode has siblings of same name. 
    If it has no siblings of same name: 
        set childnode name as key whose value is json of the child      node. (we're calling the function recursively.)
    If it has no siblings of same name
        set childnode name as key whose value is an empty array, every child whose name is same as this pushed into this array. 
return jsonResult

Here’s the JavaScript code:

This is the basic algorithm / code for converting an XML string into a JSON object. Since, it uses recursion, it can go very deep into the DOM tree and parse every single element.

This works for most of the cases. You can modify this algorithm according to your own needs or requirements.