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.