Reading An XML File Using HTML5 And jQuery

This blog explains how to export data from an XML file to a HTML table, using jQuery & HTML5.

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></tbody>  
  23. </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.    } else {  
  31.     alert("Sorry! Your browser does not support HTML5!");  
  32.    }  
  33.   } else {  
  34.    alert("Please upload a valid XML file!");  
  35.   }  
  36.  } <  
  37.  /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 the Export To Table button will export the data to the table, as shown below.
 
a
 
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.