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.
