Post
Ask Question

Reading An XML File Using HTML5 And jQuery

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.
Next Recommended Reading Reading A CSV File Using HTML5 And jQuery