Posted in Development, jQuery, JavaScript | Posted on 02-16-2012 | 3,199 views
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:
2<root>
3<name>Raymond</name>
4<bio>
5<![CDATA[
6Willy nilly stuff with <b>some html</b> and crap in it.
7]]>
8</bio>
9<likes>
10 <like>Star Wars</like>
11 <like>Beer</like>
12 <like>Cookies</like>
13</likes>
14<skillshot range="10">rifle</skillshot>
15</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:
2<html>
3<head>
4 <title></title>
5 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
6
7
8 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
9
10 <script type="text/javascript">
11
12
13 $(function() {
14
15 $.get("data.xml", {}, function(res) {
16
17 var name = $(res).find("name");
18 console.log("name = "+name.text());
19
20 var bio = $(res).find("bio");
21 console.log("bio = "+bio.text());
22
23 //notice I ask for the child like tag, not the parent likes
24 var likes = $(res).find("like");
25 $(likes).each(function(idx,item) {
26 console.log("like # "+idx+" = "+$(item).text());
27 });
28
29 var sshot = $(res).find("skillshot");
30 console.log("skillshot = "+sshot.text());
31 console.log("skillshot = "+sshot.attr("range"));
32
33 }, "xml");
34
35 });
36 </script>
37</head>
38<body>
39
40
41</body>
42</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.
http://api.jquery.com/jQuery.parseXML/
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)
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
[Add Comment] [Subscribe to Comments]