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:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(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"); });
</script>
</head>
<body> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
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.
Archived Comments
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.
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...
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.
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)
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?
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
Ah, well, interesting note there.