Quick demo of accessing XML data with jQuery

This post is more than 2 years old.

This blog post is mainly for my own memory - but a user asked about access CDATA values stored in an XML field via JavaScript. I'm using jQuery to work with XML and wrote up a very quick demo. For the most part, it seems like it "just works", but I assume there are going to be some edge cases. I'll update the demo to add more examples if folks would like.

First, I created an XML sample and named it data.xml:

<?xml version="1.0" encoding="UTF-8" ?> <root> <name>Raymond</name> <bio> <![CDATA[ Willy nilly stuff with <b>some html</b> and crap in it. ]]> </bio> <likes> <like>Star Wars</like> <like>Beer</like> <like>Cookies</like> </likes> <skillshot range="10">rifle</skillshot> </root>

Notice I've got a simple value, a value with CDATA, an collection of items, and one item with an attribute too. Here's the jQuery side:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;


$(function() {

		$.get("data.xml", {}, function(res) {

			var name = $(res).find("name");
			console.log("name = "+name.text());

			var bio = $(res).find("bio");
			console.log("bio = "+bio.text());

			//notice I ask for the child like tag, not the parent likes
			var likes = $(res).find("like");
			$(likes).each(function(idx,item) {
				console.log("like # "+idx+" = "+$(item).text());
			});

			var sshot = $(res).find("skillshot");
			console.log("skillshot = "+sshot.text());
			console.log("skillshot = "+sshot.attr("range"));

		}, "xml");

});
&lt;/script&gt;

</head> <body>

</body> </html>

Stepping through this - notice first that I tipped off jQuery to the data type. I probably didn't need this, but i like being explicit. jQuery automatically converts the result text into a proper XML object. Once I have that, then I can use the find function to grab my nodes. At this point, it almost acts like any other regular DOM item. Notice how I can simply use .text on both name and bio. It just works.

The array of items is a bit different. I grab them all and then iterate over it.

And finally - look how I handle the skillshot item. I can still do .text to get the text value, but I can also use .attr (again, like a regular DOM item) to get the attribute.

Hope this is helpful to folks. If you want to run this, hit the demo link below and ensure your console is open.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by PT posted on 2/17/2012 at 5:24 AM

Ha! This is great. We are just getting into AJaX libraries and XML is one of my classes. Very timely. It will be interesting to see how it is taught, vs this example.

Comment 2 by Joel Wallis posted on 2/19/2012 at 7:12 PM

I really want to ask you why you aren't using jQuery.parseXML() method instead. Do you had some problem using it?

http://api.jquery.com/jQuer...

Comment 3 by Raymond Camden posted on 2/19/2012 at 7:26 PM

I did. When I said the data type was XML, jQuery ran it for me - it converted the string into an XML object for me. If I did a console.dir on res you would see that.

Comment 4 by Jose Manuel posted on 2/19/2012 at 7:50 PM

Ii's good you add the 'xml' format parameter, because as far as I have tested it' necessary for IE8

By the way in Chrome function get only works when data source is http, if it's a file it doesn't work (I was trying to use it for data storage in a cdrom javascript app)

Comment 5 by Raymond Camden posted on 2/19/2012 at 8:24 PM

To be anal, all things you get from http are files (well, you can stream raw data I suppose). I assume you mean you can't get file URIs, if so, that's a security lock down. On your CD ROM app, did you try putting the file in the same folder as your html file and simply do a relative get? ie, get foo.xml?

Comment 6 by Jose Manuel posted on 2/19/2012 at 8:28 PM

Yes, I tried that:

get('file.xml')

But if it resolves to a url like 'file://file.xml' Chrome doesn't allow it. I like having my xml data in an independent xml file, but I had to store my xml data in a string because of Chrome

Comment 7 by Raymond Camden posted on 2/19/2012 at 8:32 PM

Ah, well, interesting note there.