Read and Parse XML string using JavaScript

In this article I will explain with an example, how to read and parse XML string using plain JavaScript.

This article will also explain how to parse XML to read the Node values by accessing the Nodes by Index and also by the Tag name using JavaScript.

Read and Parse XML string using JavaScript

Below is the HTML Markup of the page which consists of an HTML Button and a HTML Table. When the Button is clicked, the XML will be parsed and its Node values will be read and used to populate the HTML Table with XML data.

<head>

</head>

<body>

<hr />

<thead>

<tr>

<th>CustomerId</th>

<th>Country</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

function PopulateDropDownList() {

//Build an XML containing Customer records.

var xml = "<Customers>";

xml += "<Customer>";

xml += "<CustomerId>1</CustomerId><Name>John Hammond</Name><Country>United States</Country>";

xml += "</Customer>";

xml += "<Customer>";

xml += "<CustomerId>2</CustomerId><Name>Mudassar Khan</Name><Country>India</Country>";

xml += "</Customer>"

xml += "<Customer>";

xml += "<CustomerId>3</CustomerId><Name>Suzanne Mathews</Name><Country>France</Country>";

xml += "</Customer>";

xml += "<Customer>";

xml += "<CustomerId>4</CustomerId><Name>Robert Schidner</Name><Country>Russia</Country>";

xml += "</Customer>";

xml += "</Customers>";

var xmlDoc;

if (window.DOMParser) {

parser = new DOMParser();

xmlDoc = parser.parseFromString(xml, "text/xml");

}

else //For IE

{

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = false;

xmlDoc.loadXML(xml);

}

var customers = xmlDoc.getElementsByTagName("Customer");

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

//Get the reference of the Table's TBODY element.

var tBody = document.getElementById("tblCustomers").getElementsByTagName("TBODY")[0];

//Add Row.

row = tBody.insertRow(-1);

//Add CustomerId cell.

cell = row.insertCell(-1);

//Access the Node by its Index.

cell.innerHTML = customers[i].childNodes[0].textContent;

//Add Name cell.

var cell = row.insertCell(-1);

//Acess the Node by its Tag Name.

cell.innerHTML = customers[i].getElementsByTagName("Name")[0].textContent;

//Add Country cell.

cell = row.insertCell(-1);

//Access the Node by its Index.

cell.innerHTML = customers[i].childNodes[2].textContent;

}

</script>

</body>

</html>

Explanation:

XML Parsing

The XML string is read into an XML document and then the specific nodes i.e. Customer Node are read into a JavaScript object.

Accessing Nodes by Index

The child nodes of a XML Node can be accessed by their Index from the childNodes property which contains a collection of all child nodes for a node.

In the above JavaScript code, the CustomerId and the Country child nodes are accessed using their Index value i.e. 0 and 2.

Note: The Index value of a Node is Zero based i.e. it always starts with 0.

Accessing Nodes by Name

The child nodes of a XML Node can also accessed by their Tag Names. The value of the node Tag Name is passed to the getElementsByTagName function which will return all the child Nodes for the Tag Name value.

In the above JavaScript code, the Name child nodes are accessed using their Tag Name value i.e. Name.

Note: The Tag Name value of a Node is Case Sensitive i.e. if the Node Tag Name value is Name then name and NAME values will not work.

Screenshot