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.