Posted on

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.

Maggie MayRod StewartUKPickwick8.501990When a man loves a womanPercy SledgeUSAAtlantic8.701987Big Willie style
    Will Smith
    USA
    Columbia
    9.90
    1997

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.

$(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() + "
");
                  });
               }
  });
});

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

Rod Stewart
Percy Sledge
Will Smith

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.

        $(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.

Tags: , , ,


21 thoughts on “Parse XML with jQuery without a plugin

  1. Pingback: CSS Brigit | Parse XML with jQuery without a plugin

  2. Have you tried this using $.post()? I ended up having to get the results back as text then convert to an xml document using either DOMParser or MSXML. Just wondering if I missed something or if it gets handled differently with a post.

    Thanks!

  3. @IGotNothin $.Post just redirect to the ajax method , instead of using $.get or $.post you should use ajax, it is alot more powerful anyway.

    I have XML to parse next week with jQuery and was wondering how to do it, turns out it quite more simple than I thought!

    Thank you

  4. Hi,

    This is a nice example but i Have a problme using “UTF-16” because in my xml I have characters like “é”,
    Can someone tell me how to do this without getting an error.

    Regs Bart

  5. Thank you for explaining this in such a simple manner. It is helping me to understand JQuery better. I will be looking to your site for more helpful tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *