Parsing an XML file in JavaScript

The post shows you how to parse an XML file in JavaScript by using a built-in XML Parser.

I. Example 1

In this code example, we first define a catalog XML content, parse it to XML DOM object. Finally, we extract the info from this XML DOM object and print the info in view.

var xmlContent = '<catalog>' +
                    '<book>' +
                        '<name>Eloquent JavaScript</name>' +
                        '<author>Marijn Haverbeke</author>' +
                    '</book>' +
                    '<book>' +
                        '<name>Learning JavaScript Design Patterns</name>' +
                        '<author>Addy Osmani</author>' +
                    '</book>' +
                '</catalog>';

// parse XML content string to XML DOM object
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlContent, 'text/xml');

// access to XML nodes and get node values
var catalog = xmlDoc.getElementsByTagName('catalog')[0];

for (var i = 0; i < catalog.childElementCount; i++) {
    var book = catalog.childNodes[i];

    var childNodeName1 = book.childNodes[0].nodeName;
    var childNodeValue1 = book.childNodes[0].innerHTML;

    var childNodeName2 = book.childNodes[1].nodeName;
    var childNodeValue2 = book.childNodes[1].innerHTML;

    console.log(childNodeName1 + ': ' + childNodeValue1);
    console.log(childNodeName2 + ': ' + childNodeValue2);
    console.log('----');
}

Output:

name: Eloquent JavaScript
author: Marijn Haverbeke
----
name: Learning JavaScript Design Patterns
author: Addy Osmani

II. Example 2

In this code example, we load the content of XML file using Ajax HTTP GET request. And then we also parse it to XML DOM object, extract the info from this XML DOM object and print the info in view.

Create catalog.xml file.

<?xml version="1.0" encoding="UTF-8"?>

<catalog>
    <book>
        <name>JavaScript Garden</name>
        <author>Ivo Wetzel</author>
    </book>
    <book>
        <name>You Don’t Know JS: Up & Going 1st Edition</name>
        <author>Kyle Simpson</author>
    </book>
</catalog>

The code example shows how to load catalog.xml file and extract its info.

// XML file location
var catalogXmlFile = 'sitemap.xml';

getXMLDocObject(catalogXmlFile, function(xmlDoc) {

    // extract the info from the xmlDoc object
    var catalog = xmlDoc.getElementsByTagName('catalog')[0];
    var books = catalog.getElementsByTagName('book')

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

	    var childNodeName1 = books[i].children[0].nodeName;
	    var childNodeValue1 = books[i].children[0].innerHTML;

	    var childNodeName2 = books[i].children[1].nodeName;
	    var childNodeValue2 = books[i].children[1].innerHTML;

	    console.log(childNodeName1 + ': ' + childNodeValue1);
	    console.log(childNodeName2 + ': ' + childNodeValue2);
	    console.log('----');
	}
});

// get content and parse it to Document Object Model
function getXMLDocObject(xmlFile, callback) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if ((this.readyState === 4) && (this.status === 200)) {
            var xmlContent = this.responseText;
            var xmlDoc = parseXML(xmlContent);
            callback(xmlDoc);
        }
    };
    xhttp.open('GET', xmlFile, true);
    xhttp.send();
}

// parse a text string into an XML DOM object
function parseXML(xmlContent) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
    return xmlDoc;
}

Output:

name: JavaScript Garden
author: Ivo Wetzel
----
name: You Don’t Know JS: Up & Going 1st Edition
author: Kyle Simpson