Display Show XML string data on HTML page in Table format using JavaScript and jQuery

In this article I will explain with an example, how to display (show) XML string (data) on HTML page in Table format using JavaScript and jQuery.

The XML string will be read into an XML document which will be later used to populate the HTML Table using JavaScript and jQuery.

Below is the HTML Markup of the page which consists of an HTML Button to create the dynamic HTML Table and an HTML DIV which will hold the dynamically created table.

<hr />

</div>

$(function () {

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

//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 = $.parseXML(xml);

var customers = $(xmlDoc).find("Customer");

//Create a HTML Table element.

var table = $("<table />");

table[0].border = "1";

//Add the header row.

var row = $(table[0].insertRow(-1));

customers.eq(0).children().each(function () {

var headerCell = $("<th />");

headerCell.html(this.nodeName);

row.append(headerCell);

});

//Add the data rows.

$(customers).each(function () {

row = $(table[0].insertRow(-1));

$(this).children().each(function () {

var cell = $("<td />");

cell.html($(this).text());

row.append(cell);

});

var dvTable = $("#dvTable");

dvTable.html("");

dvTable.append(table);

});

</script>

Explanation:

XML Parsing

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

Adding the Header Row

The Header Row will be built using the first Node of the XML by looping through the Child Nodes and reading its names and one by one Table TH element is created and appended to the header row using jQuery.

Table insertRow Method: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.

Adding the Data Rows

A loop is executed over the XML nodes and one by one a Row is created in the HTML Table. Then inside each Row a dynamic cell element is created and appended using jQuery.

Adding the dynamic Table to the Page

Finally the dynamically created table is added to the page by appending it the HTML DIV using jQuery

Note: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.

Screenshot