Parsing annoying Youtube API XML feeds with jQuery

Question

I am learning how to utilise external XML feeds within our Intranet, to better serve our staff and reduce their need to go outside the network for content.

I can render the basic information from the feed without a problem. Where I come unstuck is trying to display one of the video thumbnails to use as part of the my chosen layout.

Problem

I am trying to grab the value of URL property from the first media:thumbnail element for use in an img tag, but whatever I try I can't seem to render the contents of it.

Eg; <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg'... />

The piece of text I'd want to extract & use from the above example is http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg

I suspect why I'm not able to parse the value of this element has something to do with the element name having a period (:) separator in it, and/or my developing knowledge of jQuery suspects I'm not calling or attempting to parse this element or part thereof correctly.

I'd also like to render the value of media:keywords as well, which would be solved by understanding the same issue.

Code used to render the XML

<script type="text/javascript">
/* learned from http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery */
/* this can be used to parse any file in an XML format */
$(document).ready(function()
{
/*
perform an asynchronous ajax request using the relevant variables
Documentation: http://api.jquery.com/jQuery.ajax/
*/
  $.ajax({
    type: "GET",
    /* define url of xml file to parse */
    url: "/pr/rss_repository/youtube.xml",
    /* assign it a data type */
    dataType: "xml",
    /* state name of function to run if file is successfully parsed */
    success: parseXml
  });
});
function parseXml(xml)
/* this is where the xml file is parsed and converted into a HTML output */
{

  //for each item node in the xml file
  $(xml).find("item").each(function()
  {
  //print the following html, inserting the relevant data within the nodes of item
    //this is the heading
    $("#output").append("<h2><a href=\"" + $(this).find("link").text() + "\" target=\"_blank\"> " + $(this).find("title").text() + "</a></h2>\n");
//this is a new paragraph with the publication date
    $("#output").append("<p>" + $(this).find("pubDate").text() + "</p>\n");
//this is the description text of the item
$("#output").append("<p>" + $(this).find("description").text() + "</p>\n");
$("#output").append("<p><img src=\"" + $(this).find("media:thumbnail").text() + "\"></p>\n");
  });
 //end for each
//end function
}
</script>

Resultant HTML

<h2><a href="http://www.youtube.com/watch?v=CQP_AuT4zXQ&amp;amp;feature=youtube_gdata" target="_blank"> IFA World Forestry Day 2010 forum - Bob Pearce, FIFWA (Part 1)</a></h2>
<p>Thu, 01 Apr 2010 06:44:19 +0000</p>
<p>Bob Pearce, Executive Director - Forest Industries Federation of Western Australia delivers a presentation on the impact of timber harvesting in healthy forests at the Institute of Foresters of Australia 2010 World Forestry Day forum.</p>
<p><img src=""></p>
...

Sample of XML from Youtube being parsed

The file is grabbed and brought into our servers here, to save the file being downloaded each time it is called. We pull it into the network using VBScript which dumps the contents returned from the URL queried.

Example of data, from http://gdata.youtube.com/feeds/api/videos?alt=rss&author=fpcwa:

<?xml version='1.0' encoding='UTF-8'?>
<rss xmlns:atom='http://www.w3.org/2005/Atom' xmlns:media='http://search.yahoo.com/mrss/' xmlns:openSearch='http://a9.com/-/spec/opensearch/1.1/' xmlns:gd='http://schemas.google.com/g/2005' xmlns:gml='http://www.opengis.net/gml' xmlns:yt='http://gdata.youtube.com/schemas/2007' xmlns:georss='http://www.georss.org/georss' version='2.0'>
  <channel>
    ... standard channel description
    <item>
      <guid isPermaLink='false'>tag:youtube.com,2008:video:CQP_AuT4zXQ</guid>
      <pubDate>Thu, 01 Apr 2010 06:44:19 +0000</pubDate>
      <atom:updated>2010-04-29T00:03:31.000Z</atom:updated>
      <category domain='http://schemas.google.com/g/2005#kind'&gt;http://gdata.youtube.com/schemas/2007#video&lt;/category&gt;
      <category domain='http://gdata.youtube.com/schemas/2007/categories.cat'&gt;News&lt;/category&gt;
      <category domain='http://gdata.youtube.com/schemas/2007/keywords.cat'&gt;ifa&lt;/category&gt;
      ... remaining categories
      <title>IFA World Forestry Day 2010 forum - Bob Pearce, FIFWA (Part 1)</title>
      <link>http://www.youtube.com/watch?v=CQP_AuT4zXQ&amp;feature=youtube_gdata&lt;/link&gt;
      <author>fpcwa</author>
      <yt:accessControl action='comment' permission='allowed'/>
      ...
      <gd:comments>
        <gd:feedLink href='http://gdata.youtube.com/feeds/api/videos/CQP_AuT4zXQ/comments?client=ytapi-google-jsdemo' countHint='0'/>
      </gd:comments>
      <media:group>
        <media:category label='News & Politics' scheme='http://gdata.youtube.com/schemas/2007/categories.cat'&gt;News&lt;/media:category&gt;
        <media:content url='http://www.youtube.com/v/CQP_AuT4zXQ?f=videos&amp;c=ytapi-google-jsdemo&amp;app=youtube_gdata' type='application/x-shockwave-flash' medium='video' isDefault='true' expression='full' duration='587' yt:format='5'/>
        <media:content url='rtsp://v1.cache6.c.youtube.com/CjcLENy73wIaLgl0zfjkAv8DCRMYDSANFEITeXRhcGktZ29vZ2xlLWpzZGVtb0gGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='587' yt:format='1'/>
        <media:content url='rtsp://v2.cache3.c.youtube.com/CjcLENy73wIaLgl0zfjkAv8DCRMYESARFEITeXRhcGktZ29vZ2xlLWpzZGVtb0gGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='587' yt:format='6'/>
        <media:credit role='uploader' scheme='urn:youtube'>fpcwa</media:credit>
        <media:description type='plain'>Bob Pearce, Executive Director - Forest Industries Federation of Western Australia delivers a presentation on the impact of timber harvesting in healthy forests at the Institute of Foresters of Australia 2010 World Forestry Day forum.</media:description>
        <media:keywords>ifa, institute of foresters, australia, forestry, world forestry day, 2010, forum, healthy forests, forest, forests, bob pearce, fifwa</media:keywords>
        <media:player url='http://www.youtube.com/watch?v=CQP_AuT4zXQ&amp;feature=youtube_gdata'/&gt;
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg' height='90' width='120' time='00:04:53.500'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/2.jpg' height='90' width='120' time='00:04:53.500'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/1.jpg' height='90' width='120' time='00:02:26.750'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/3.jpg' height='90' width='120' time='00:07:20.250'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/hqdefault.jpg' height='360' width='480'/>
        <media:title type='plain'>IFA World Forestry Day 2010 forum - Bob Pearce, FIFWA (Part 1)</media:title>
        <yt:aspectRatio>widescreen</yt:aspectRatio>
        <yt:duration seconds='587'/>
        <yt:uploaded>2010-04-01T06:44:19.000Z</yt:uploaded>
        <yt:videoid>CQP_AuT4zXQ</yt:videoid>
      </media:group>
      <yt:statistics favoriteCount='0' viewCount='10'/>
    </item>

Answer 1

This is a bug in jQuery, where it does not support handling XML namespaces. You can one of the following two approaches:

.find("[nodeName=media:thumbnail]")
.find("media\\:thumbnail]")

Most people recommend the first one since the second one does not work under certain WebKit versions.

If you want more details or other alternatives, do a search for "jquery find namespace" on the web.

Update: To get the value of the ulr attribute on the media:thumbnail node, use the following:

.attr("url")

Answer 2

A completely different approach would be to request your YouTube API results in JSON-C format rather than Atom XML:

http://code.google.com/apis/youtube/2.0/developers_guide_jsonc.html

You should find the results much easier to work with from your JavaScript code.