Read xml file using jqueryAdd Article
Share On: facebook gplus twitter

Here, I am going to explain how you can read XML data by using jQuery.

I take one XML files with few products into different category like electronics, clothes cosmetics and furniture. Under these categories, each having one product with elements like product name, product price and description.

Now, if you want to read particular category's product, this example will help you for sure.

Lets create one XML file with following data.

Filename: products_1.xml

<?xml version="1.0" encoding="UTF-8"?>
<products>
 <electronics>
  <product>
   <id>produt_1001</id>
   <name>Samsung Galaxy J7 Prime Mobile</name>
   <description>Having many advanced features, this mobile is great to use for internet users</description>
  </product>
 </electronics>
 <clothes>
  <product>
   <id>produt_3001</id>
   <name>Peter England Medium Size T-Shirt</name>
   <description>Cool t-shirt available with medium size and discounted price as well</description>
  </product>
 </clothes>
 <cosmetics>
  <product>
   <id>produt_6001</id>
   <name>Lakme Face Magic Souffle Foundation</name>
   <description>It is suitable for Fair skin tone</description>
  </product>
 </cosmetics>
 <furniture>
  <product>
   <id>produt_8001</id>
   <name>FurnitureKraft Caen Double Metal</name>
   <description>Suitable For: Seating</description>
  </product>
 </furniture>
</products>

Now, lets try to read cosmetics products by using following jQuery example.

<body style="font-family:Verdana;">
    <input type="button" value="Read XML File" onclick="ReaxXMLDocument();" />
    <div id="dvData"></div>
<script type="text/javascript">
    function ReaxXMLDocument() {

        //Read XML file
        var XMLString = "";
        var objXMLHttpRequest = new XMLHttpRequest();
        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState == 4 && objXMLHttpRequest.status == 200) {

                XMLString = objXMLHttpRequest.responseXML
            }
        };
        objXMLHttpRequest.open("GET", "products_1.xml", true);
        objXMLHttpRequest.send();

        var parser, xmlDoc;
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(XMLString, "text/xml");
        
        var strHtml = "<table style='Border:solid 1px silver;' cellpadding='5'cellspacing='5'>";
        strHtml += "<tr><td><b>Product Id</b></td><td><b>Product Name</b></td><td><b>Product Description</b></td></tr><tr>";
        

        $(xmlDoc).find('cosmetics product').each(function () {
            //read id for product
            $(this).find("id").each(function () {
                var id = $(this).text();
                strHtml += "<td>" + id + "</td>";
            });

            //read name for product
            $(this).find("name").each(function () {
                var name = $(this).text();
                strHtml += "<td>" + name + "</td>";
            });

            //read description for product
            $(this).find("description").each(function () {
                var description = $(this).text();
                strHtml += "<td>" + description + "</td>";
            });
        });
        strHtml += "</tr></table>";
        document.getElementById("dvData").innerHTML = strHtml;
    }
</script>
</body>

The output look like this;

I hope this helps you to read xml data by using jquery.

Thanks

About the Author

profile
Haresh Chaudhari
Software Developer
Working as software developer in well recognized IT company in Ahmedabad.
  • 344
  • 8
  • Bronze
08/06/2018
Add Comment:

Comments

Very Usefull
08/09/2018 8:27:59 AM   08:27:59   Shailesh Chaudhary
Excellent tutorials I found fo xml and jquery by using DOM
07/08/2018 3:34:01 PM   15:34:01   Kaushal Patel
Very well done and spending time to write this article. This will really helps developer to write code if they want to read xml document by jquery. thanks for such a nice article. Keep it up.
07/08/2018 3:24:20 PM   15:24:20   Narendra Shah