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" />

<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>

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.