Read XML using jQuery & load it in HTML Table

: 8427

Last Updated : 19/10/2022

Posted By :- vikas_jk

In this article, I have provided code for how we can read XML file using jQuery and then load it in an HTML table, to show XML in tabular form.

Suppose this is our sample XML file, which we would like to read

<?xml version="1.0"?>
<catalog>
   <book>
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>
   <book>
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <description>A former architect battles corporate zombies, 
      an evil sorceress, and her own childhood to become queen 
      of the world.</description>
   </book>
   <book>
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <description>After the collapse of a nanotechnology 
      society in England, the young survivors lay the 
      foundation for a new society.</description>
   </book>
   <book>
      <author>Corets, Eva</author>
      <title>Oberon's Legacy</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <description>In post-apocalypse England, the mysterious 
      agent known only as Oberon helps to create a new life 
      for the inhabitants of London. Sequel to Maeve 
      Ascendant.</description>
   </book>
   <book>
      <author>Corets, Eva</author>
      <title>The Sundered Grail</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <description>The two daughters of Maeve, half-sisters, 
      battle one another for control of England. Sequel to 
      Oberon's Legacy.</description>
   </book>
</catalog>

You can also find above XML file at the given URL: https://qawithexperts.com/book.xml

Now, we would need to write HTML and jQuery code to parse XML and load data in HTML table as content.

<!DOCTYPE html>
<html>
<head>
    <title>Read XML Data Using jQuery Ajax and Load it in HTML table</title>
    <!--Include Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
      <!--Include jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        
    </style>
</head>

<body>

    <p>
      Click button to Read XML and Show it in HTML
    </p>

    <input type="button" value="Read XML" id="btn" />
    <table class="table table-condensed table-hovered table-striped">
      <thead>
        <tr>
          <th>Author</th>
          <th>Title</th>
          <th>Genre</th>
          <th>Price</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody id="tableBody">
        
      </tbody>
    
    </table>
</body>

<script>
    $(document).ready(function() {
        //jQuery on button click Call
        $('#btn').click(function () {
        
            $('#tableBody').empty();       // Clear the table body.
            //ajax call to load XML and parse it
            $.ajax({
                type: 'GET',
                url: 'https://res.cloudinary.com/dmsxwwfb5/raw/upload/v1591716537/book.xml',           // The file path.
                dataType: 'xml',    
                success: function(xml) {
                   //find all book tags, loop them and append to table body
                    $(xml).find('book').each(function() {
                        
                        // Append new data to the tbody element.
                        $('#tableBody').append(
                            '<tr>' +
                                '<td>' +
                                    $(this).find('author').text() + '</td> ' +
                                '<td>' +
                                    $(this).find('title').text() + '</td> ' +
                                '<td>' +
                                    $(this).find('genre').text() + '</td> ' +
                                    '<td>' +
                                    $(this).find('price').text() + '</td> ' +
                                    '<td>' +
                                    $(this).find('description').text() + '</td> ' +
                            '</tr>');
                    });
                }
            });
        });
    });
</script>
</html>

In the above code, we are loading XML file from URL using jQuery Ajax.

Once the request is successful, we are looping the <book> tag of above XML, then extracting data from each tag inside it using .find('tagname').text(), and appending the text in table row using <tr>, <td>.

Here is the working fiddle sample.

That's it, we are done, here is the gif sample

/read-xml-using-jquery-ajax-load-in-html-table-min.gif