-->

How to Fetch and Show Data from XML file using Jquery.

Introduction

In this post, I explain how to Fetch and Show Data from XML file using Jquery.
In this tutorial, I am going to create an asp.net application where I will fetch the data present in XML format and display fetched content on the web page using Jquery.

Steps :

Step - 1: Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add an XML file into Project.

Right Click on Solution Explorer > Add > New existing item > Select XML File > Add.

Step-3: Add a Webpage and Design for fetch and show data using Jquery.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

Jquery Code
     <script src="Scripts/jquery-1.7.1.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnGetData").click(function () {
                $("#UpdatePanel").html("Please wait...");
                $.ajax({
                    url: "/cd_catalog.xml",
                    type: "GET",
                    dataType: "xml",
                    success: OnSuccess,
                    error: OnError
                });
            });
        });

        function OnSuccess(xml) {
            var tableContent = "<table border='1' cellspacing='0' cellpadding='5'>" +
                                "<tr>" +
                                    "<th>TITLE</th>" +
                                    "<th>ARTIST</th>" +
                                    "<th>COUNTRY</th>" +
                                    "<th>COMPANY</th>" +
                                    "<th>PRICE</th>" +
                                    "<th>YEAR</th>" +
                                "</tr>";
            $(xml).find('CD').each(function () {
                tableContent += "<tr>" +
                                    "<td>" + $(this).find('TITLE').text() + "</td>" +
                                    "<td>" + $(this).find('ARTIST').text() + "</td>" +
                                    "<td>" + $(this).find('COUNTRY').text() + "</td>" +
                                    "<td>" + $(this).find('COMPANY').text() + "</td>" +
                                    "<td>" + $(this).find('PRICE').text() + "</td>" +
                                    "<td>" + $(this).find('YEAR').text() + "</td>" +
                                "</tr>";
            });
            tableContent += "</table>";
            $("#UpdatePanel").html(tableContent);
        }

        function OnError(data) {
            $("#UpdatePanel").html("Error! Please try again.");
        }

    </script>
        
HTML Code
    <h3>Populate Data from XML file using Jquery</h3>
    <input id="btnGetData" type="button" value="Populate Data from XML File" />
    <div id="UpdatePanel" style="padding:20px 10px">
        
    </div>
        

Step-4: Run Application.


Related Post:


Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.