Parse XML with jQuery without a plugin

A few days ago I found a jQuery Plugin called jParse that allows you to quickly and easily parse XML.  While this is a great plugin and does exactly as it says, I personally try not to use too many plugins in my JavaScript Programing.  So I decided to write a tutorial to show you how easy it actually is to Parse XML via jQuery.

Lets first take a look at the XML file we are going to Parse. The XML document is saved as cd_catalog.xml.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8" ?>
<CATALOG>
  <CD type="physcial">
    <TITLE>Maggie May</TITLE>
    <ARTIST>Rod Stewart</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Pickwick</COMPANY>
    <PRICE>8.50</PRICE>
    <YEAR>1990</YEAR>
  </CD>
  <CD type="physical">
    <TITLE>When a man loves a woman</TITLE>
    <ARTIST>Percy Sledge</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Atlantic</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1987</YEAR>
  </CD>
  <CD type="digital">
    <TITLE>Big Willie style</TITLE>
    <ARTIST>Will Smith</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1997</YEAR>
  </CD>
</CATALOG>

As you see this is a simple XML document of a CD Catalog. If you have never seen an XML document before I suggest you read up on it. Now lets look at the jQuery Code we will use to extract the data. I am going to post the full code and then explain what each line does. If you don’t care what each line does then feel free to copy and paste and augment the code. Anyway here is the code.

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "cd_catalog.xml",
    dataType: "xml",
    success: function(xml){
                  $(xml).find("CD").each(function(){
                        $("#CD").append($(this).find("ARTIST").text() + "<br />");
                  });
               }
  });
});

The output of the jQuery code would look something like this:

1
2
3

Rod Stewart<br />
Percy Sledge<br />
Will Smith<br />

So now that you see the code let me explain. First you must call the $.Ajax Get Request in order to actually get the XML file. (On a side note you may also use jQuery’s $.get function to retrieve the XML document.) Click here if you don’t understand the $.Ajax Get Request. When you successfully get the cd_catalog.xml file you must call a function to process the XML. Then on Line 7 in the jQuery code $(xml).find(”CD”).each(function() is how you actually process the XML data. First you must use the .find to search all “CD” tags in the XML document then use the .each to loop through every “CD” tag that is in the XML document. Now that we are looping through the all “CD” tags, we can output the Artist Name by using the following code on line 8 $(”#CD”).append($(this).find(”ARTIST”).text() + “br/”);. We must first Append data to the div with the ID CD in the HTML document. The data that we will append to the div is as follows: $(this).find(”ARTIST”).text(). What we do here is find the tag “ARTIST” within the “CD” Node and get the text within the “ARTIST” tag. As you see its pretty simple to Parse an XML document with jQuery. But there is one more topic I want to cover and that is XML tag Attributes.

In the XML document above you can see that in the “CD” tag we have an attribute called “type”. To access an attribute you can use the code below after line 7 in the above jQuery code.

1

        $(this).attr("type")

And that is it for this tutorial. I hope it will help you on your quest to become a jQuery guru. If you have any questions please don’t hesitate to comment below.

Popularity: 3% [?]

Related Posts