Reading An XML File Using HTML5 And jQuery

In this blog, we will learn how to read an XML file from the client side and display its contents in an HTML table by making use of the FileReader() method in HTML5 & jQuery.
 
First, we will create a file upload button, HTML table, which is hidden first, and an input button, which on clicking calls the function to export XML data to the table.
  1. <input type="file" id="xmlfile" />  
  2.    <input type="button" id="viewfile" value="Export To Table" onclick="ExportToTable()" />  
  3.    <br />  
  4.    <br />  
  5.    <table id="xmltable">  
  6.        <thead>  
  7.            <tr>  
  8.                <th>  
  9.                    Name  
  10.                </th>  
  11.                <th>  
  12.                    Job  
  13.                </th>  
  14.                <th>  
  15.                    City  
  16.                </th>  
  17.                <th>  
  18.                    State  
  19.                </th>  
  20.            </tr>  
  21.        </thead>  
  22.        <tbody>  
  23.        </tbody>  
  24.    </table>  
Now, our JavaScript function ExportToTable() is given below.
  1. <script type="text/javascript">  
  2.       function ExportToTable() {  
  3.           var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xml)$/;  
  4.           //Checks whether the file is a valid xml file  
  5.           if (regex.test($("#xmlfile").val().toLowerCase())) {  
  6.               //Checks whether the browser supports HTML5  
  7.               if (typeof (FileReader) != "undefined") {  
  8.                   var reader = new FileReader();  
  9.                   reader.onload = function (e) {  
  10.                       var xmlDoc = $.parseXML(e.target.result);  
  11.                       //Splitting of Rows in the xml file  
  12.                       var xmlrows = $(xmlDoc).find("Employee");  
  13.                       var table = $("#xmltable > tbody");  
  14.                       for (var i = 0; i < xmlrows.length; i++) {  
  15.                           if (xmlrows[i] != "") {  
  16.                               var row = "<tr>";  
  17.                               var xmlcols = $(xmlrows[i]).children();  
  18.                               //Looping through each nodes in a xml row  
  19.                               for (var j = 0; j < xmlcols.length; j++) {  
  20.                                   var cols = "<td>" + $(xmlcols[j]).text() + "</td>";  
  21.                                   row += cols;  
  22.                               }  
  23.                               row += "</tr>";  
  24.                               table.append(row);  
  25.                           }  
  26.                       }  
  27.                       $('#xmltable').show();  
  28.                   }  
  29.                   reader.readAsText($("#xmlfile")[0].files[0]);  
  30.               }  
  31.               else {  
  32.                   alert("Sorry! Your browser does not support HTML5!");  
  33.               }  
  34.           }  
  35.           else {  
  36.               alert("Please upload a valid XML file!");  
  37.           }  
  38.       }  
  39.   </script>  
Our sample XML file contains the data of certain employees, as given below.
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Employeedetails>  
  3.     <Employee>  
  4.         <Name>Rajeev</Name>  
  5.         <Job>Developer</Job>  
  6.         <City>  
  7.             Mumbai  
  8.         </City>  
  9.         <State>  
  10.             Maharashtra  
  11.         </State>  
  12.     </Employee>  
  13.     <Employee>  
  14.         <Name>Ranjith</Name>  
  15.         <Job>Developer</Job>  
  16.         <City>  
  17.             Pune  
  18.         </City>  
  19.         <State>  
  20.             Maharashtra  
  21.         </State>  
  22.     </Employee>  
  23.     <Employee>  
  24.         <Name>Samuel</Name>  
  25.         <Job>Tester</Job>  
  26.         <City>  
  27.             Bangalore  
  28.         </City>  
  29.         <State>  
  30.             Karnataka  
  31.         </State>  
  32.     </Employee>  
  33.     <Employee>  
  34.         <Name>Karthik</Name>  
  35.         <Job>Tester</Job>  
  36.         <City>  
  37.             Chennai  
  38.         </City>  
  39.         <State>  
  40.             Tamilnadu  
  41.         </State>  
  42.     </Employee>  
  43. </Employeedetails>  
Now, on selecting this XML file and clicking on Export To Table button will export the data to the table, as shown below.
 

Summary

In this blog, we learned how to make use of FileReader() method of HTML5 & jQuery to export the data from an XML file to an HTML table.

Hope this will be helpful.