Extracting CDATA Using jQuery

Question

It looks like this has been asked before, but the answers do not appear to work for me. I am outputting information from a local XML file, but the description elements is not being output because it is enclosed in CDATA - if I remove the CDATA portion then things work fine.

Here is my code:

$(document).ready(
  function() {
    $.get('test.xml',
      function($info) {
        objInfo = $($info);

        objInfo.find('item').slice(0,5).each(
          function() {
            var Guid = $(this).find('guid').text();
            var Title = $(this).find('title').text();
            var Description = $(this).find('description').text();
            $('#Content').append(
              "<p><a href='" + Guid + "'>" + 
              Title + "</a>&nbsp;" +
              Description +
              "</p>"
            )
          }
        );

      },
      'xml'
    );
  }
)

Any idea how I can successfully extract Description information that is wrapped in CDATA?

Thanks -

george

Answer 1

From http://hubblesite.org/newscenter/newscenter_rss.php, an example of the XML I am working with is:

<?xml version="1.0" ?>
<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0" xmlns:stsci="http://hubblesite.org/"&gt;
  <channel>
    <description>NewsCenter is the complete collection of every Hubble Space Telescope news release and its supporting materials, along with tools and resources designed to further your knowledge of astronomy.</description>
    <docs>http://backend.userland.com/rss&lt;/docs&gt;
    <item>
      <description><![CDATA[<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-11-a-small_web.jpg" /><br />
<a href="http://hubblesite.org/newscenter/archive/releases/2010/11/"&gt;Get larger image formats</a>
<p>The Hubble Space Telescope's dramatic glimpse of the
Carina Nebula, a gigantic cloud of dust and gas
bustling with star-making activity, is a glorious feast
for the eyes. Energetic young stars are sculpting a
fantasy landscape of bubbles, valleys, mountains, and
pillars. Now this celestial fantasyland has been brought
into view for people who cannot explore the image by
sight. Max Mutchler, a research and instrument scientist
at the Space Telescope Science Institute in Baltimore, and Noreen Grice, president of You Can Do Astronomy LLC and author of several tactile astronomy books, have created a
touchable image of the Carina Nebula that is engaging 
for everyone, regardless of their visual ability.</p>]]></description>
      <enclosure type="image/jpeg" length="18260" url="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-11-a-small_web.jpg" />
      <guid>http://hubblesite.org/newscenter/archive/releases/2010/11/&lt;/guid&gt;
      <link>http://hubblesite.org/newscenter/archive/releases/2010/11/&lt;/link&gt;
      <pubDate>Tue, 30 Mar 2010 09:00:00 -0400</pubDate>
      <stsci:miniThumbnailImageURL>http://imgsrc.hubblesite.org/hu/db/images/hs-2010-11-a-mini_thumb.jpg&lt;/stsci:miniThumbnailImageURL&gt;
      <stsci:releaseIdentifier>STScI-2010-11</stsci:releaseIdentifier>
      <stsci:thumbnailImageURL>http://imgsrc.hubblesite.org/hu/db/images/hs-2010-11-a-thumb.jpg&lt;/stsci:thumbnailImageURL&gt;
      <title>Exploring the Carina Nebula By Touch</title>
    </item>
    <item>
      <description><![CDATA[<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-12-a-small_web.jpg" /><br />

<a href="http://hubblesite.org/newscenter/archive/releases/2010/12/"&gt;Get larger image formats</a>
<p>Take an exhilarating ride through the Orion Nebula, a vast star-making factory
1,500 light-years away. Swoop through Orion's giant canyon of gas and dust.
Fly past behemoth stars whose brilliant light illuminates and energizes the
entire cloudy region. Zoom by dusty tadpole-shaped objects that are fledgling
solar systems. This virtual space journey isn't the latest video game but one of
several groundbreaking astronomy visualizations created by specialists at the
Space Telescope Science Institute (STScI) in Baltimore, the science operations
center for NASA's Hubble Space Telescope.</p>]]></description>
      <enclosure type="image/jpeg" length="26175" url="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-12-a-small_web.jpg" />
      <guid>http://hubblesite.org/newscenter/archive/releases/2010/12/&lt;/guid&gt;
      <link>http://hubblesite.org/newscenter/archive/releases/2010/12/&lt;/link&gt;
      <pubDate>Fri, 19 Mar 2010 09:00:00 -0400</pubDate>
      <stsci:miniThumbnailImageURL>http://imgsrc.hubblesite.org/hu/db/images/hs-2010-12-a-mini_thumb.jpg&lt;/stsci:miniThumbnailImageURL&gt;
      <stsci:releaseIdentifier>STScI-2010-12</stsci:releaseIdentifier>
      <stsci:thumbnailImageURL>http://imgsrc.hubblesite.org/hu/db/images/hs-2010-12-a-thumb.jpg&lt;/stsci:thumbnailImageURL&gt;
      <title>Experience Hubble's Universe in 3-D</title>
    </item>

etc...

Oddly, I cannot access the link element, though I can get the same information using guid, so that is less of a concern.

If I physically remove the CDATA markup from the XML file I can get to the description information, but have not been able to figure out how to access it otherwise, as nothing is returned when it is present.

Thanks -

george

Answer 2

Any ideas?

Thanks -

george

Answer 3

Okay, I guess I'll assume that it just isn't possible.

george

Answer 4

sorry no answer but I've got a similar situation and hope that someone will post an answer...

Answer 5

I just spent the last few hours on something very similar, and what worked for me was explicitly setting the content type to "text/xml" and "xml" on sending / receiving sides. I.e,

Server side:

...
response.setContentType("text/xml");
...

Client / jQuery side:

... 
$.ajax({
  type: 'POST',
  url: 'myAjaxHandler',
  processData: false,
  data: message,
  contentType: 'text/xml', 
  dataType: 'xml',
  success: function(xml, textStatus) {
   var myVar= $(xml).find('interestingNode').text();
   $('#someId').append(myVar); 
  },
  error: function(xhr, textStatus, errorThrown) {
   ...
  }
 });

...

Not sure if both are required.

From the documentation, if you don't specify the content type anywhere, jQuery will try to "guess" what you are sending, and in my case I had HTML embedded in CDATA.