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

In one of my previous articles, I have explained with an example on how to extract data from an XML file using JavaScript and XMLHttpRequest object. Now, here in this post, I am sharing a simple example that shows how to extract and read XML data from an file using jQuery and Ajax.

Extract XML Data using Ajax and jQuery

See this demo

The XML Data

The example below, extracts data from a file. Therefore, first create an XML file (with .xml extension). You can copy data from this file. No problem if you have a different list or format, however, just be careful while defining the nodes in your script.

The Markup with the Script

Add a <div> element inside the <body> tag of the page. Since, we'll be showing the extracted data inside the <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 () {
            $('#books').empty();       // Clear the DIV.

            $.ajax({
                type: 'GET',
                url: '../../library/library.xml',           // The file path.
                dataType: 'xml',    
                success: function(xml) {
                    $(xml).find('List').each(function() {
                        
                        // Append new data to the DIV element.
                        $('#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 http GET request in jQuery Ajax. I have also assigned the URL of the XML file along with the dataType.

When the request is successfull made, 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 (see above example) we can populate data extracted for an XML file to a Asp.Net listbox control or a dropdownlist control.

Drag and drop a ListBox control (from the Asp.Net toolbox) in your web page and write the below code to extract and populate data to the ListBox.

<!DOCTYPE html>
<html>
<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>
</html>

Well, that's it. Thanks for reading.

See this demo

← PreviousNext →


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: