Extract and Read Data from an XML file using jQuery and Ajax

In one of my previous articles, I have explained with example on how to extract data from an XML file using JavaScript and XMLHttpRequest object. Now, in this article we will discuss on how to extract and read XML data using Ajax and jQuery.

Extract XML Data using Ajax and jQuery

See this demo

To extract data, jQuery will have to make a call to the XML and what it receives by the callback is a DOM element. Traversing a DOM element, followed by delivering the data to the client using jQuery is quick.

To start with, we first need an XML file and some data in it. We have already created the XML file for our example. It is library of books with elements such as BookName, Category and Price of each book.

You can open library.xml file to view it. Copy the contents of the file and save it in your computer and name it as library.xml, because we are using the same file name in our example. You can change the name of the file according to your choice later.

Open Visual Studio, from the file menu add a New Web Site, and choose the language you are comfortable.

Now before starting with the data extraction part, we will add a DIV element in the body tag of the page. The DIV will display the extracted data from XML file on the page.

Display XML in an HTML DIV Element

<!DOCTYPE html>
<html>
<head>
    <title>Extract and Read XML Data Using jQuery and Ajax</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        #books {
            font:12px Arial;
            width:500px;
            text-align:center;
            overflow:hidden;
        }
        #books div  {
            width:auto;
            text-align:left;
            margin:1px;
            padding:2px 5px;
            letter-spacing:1px;
        }
    </style>
</head>

<body>
    <p>Click the button to extract data from an XML file and display!</p>

    <input type="button" value="Click it!" id="bt" />
    <div id="books"></div>
</body>

<script>
    $(document).ready(function() {

        $('#bt').click(function () {
            $.ajax({
                type: 'GET',
                url: 'https://www.encodedna.com/library/library.xml',
                dataType: 'xml',
                success: function(xml) {
                    $(xml).find('List').each(function() {

                        $('#books').append(
                            '<div>' +
                                '<div><b>Name of Book: </b>' +
                                    $(this).find('BookName').text() + '</div> ' +
                                '<div><b>Category: </b>' +
                                    $(this).find('Category').text() + '</div> ' +
                                '<div><b>Price: </b>' +
                                    $(this).find('Price').text() + '</div> ' +
                            '</div>');
                    });
                }
            });
        });
    });
</script>
</html>
Try it

In the above script, I am loading the data using https GET request. I have also assigned the URL of the XML file along with the dataType.

When confirmed that the request made is a success, jQuery will traverse through each List tag in the DOM tree and append the values of each attribute inside the tag (XML tag) to the DIV element.

Populate XML Data in an Asp.Net ListBox

Using similar method we can populate data extracted for an XML file to a listbox control or a dropdownlist control also.

All we need to do in our example is add an Asp.Net ListBox control and write jQuery to populate data in the list box. There are no major change in this example, accept we are adding a small script to append the data in the list box.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <div>
        <asp:ListBox ID="lstBooks" Width="300px" runat="server"></asp:ListBox>
    </div>    
</body>
<script>
    $(document).ready(function() {
        $.ajax({
            type: 'GET',
            url: 'library.xml',
            dataType: 'xml',
            success: function(xml) {
                $(xml).find('List').each(function() {
                    $('#lstBooks')
                        .append($('<option />')
                        .text($(this)
                        .find('BookName').text()));
                });
            }
        });
    });
</script>

Well, that's it. Thanks for reading.

See this demo

Thanks for reading.

Previous - Drag and Drop GridView Rows using jQuery tableDnD Plugin – C# and Vb.NetNext - Get X, Y Coordinates of an Image on Mouse Click or Mouse Move using jQuery



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: