title: Parsing WordPress RSS Feed with JQuery
body: <p>I am using JQuery to read and parse a self-hosted WordPress atom feed. Here's an example of the XML generated by WordPress:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;feed
    xmlns="http://www.w3.org/2005/Atom"
    xmlns:thr="http://purl.org/syndication/thread/1.0"
    xml:lang="en-US"
    xml:base="http://example.com/wp/wp-atom.php"
     &gt;
      &lt;title type="text"&gt;Feed Title&lt;/title&gt;
      &lt;subtitle type="text"&gt;Feed Subtitle&lt;/subtitle&gt;
      &lt;updated&gt;2013-04-19T21:33:48Z&lt;/updated&gt;
      &lt;link rel="alternate" type="text/html" href="http://example.com/wp" /&gt;
      &lt;id&gt;http://example.com/wp/index.php/feed/atom/&lt;/id&gt;
      &lt;link rel="self" type="application/atom+xml" href="http://example.com/wp/index.php/feed?feed=atom&amp;#038;cat=10" /&gt;
      &lt;generator uri="http://wordpress.org/" version="3.5.1"&gt;WordPress&lt;/generator&gt;
      &lt;entry&gt;
          &lt;author&gt;
          &lt;name&gt;Author Name&lt;/name&gt;
          &lt;/author&gt;
          &lt;title type="html"&gt;Article Title&lt;/title&gt;
          &lt;link rel="alternate" type="text/html" href="http://example.com/wp/index.php/2013/04/19/article-title/" /&gt;
          &lt;id&gt;http://example.com/wp/?p=1418&lt;/id&gt;
          &lt;updated&gt;2013-04-19T21:33:48Z&lt;/updated&gt;
          &lt;published&gt;2013-04-19T21:33:16Z&lt;/published&gt;
          &lt;category scheme="http://example.com/wp" term="firstcategory" /&gt;
          &lt;category scheme="http://example.com/wp" term="secondcategory" /&gt;
          &lt;category scheme="http://example.com/wp" term="thirdcategory" /&gt;
          &lt;summary type="html"&gt;A summary excerpt of the article [...]&lt;/summary&gt;
          &lt;content type="html" xml:base="http://example.com/wp/index.php/2013/04/19/tons-vs-tonnes/"&gt;A summary excerpt of the article with a whole bunch more text taht is not in the summary.
          &lt;/content&gt;
          &lt;link rel="replies" type="text/html" href="http://example.com/wp/index.php/2013/04/19/article-title/#comments" thr:count="0"/&gt;
          &lt;link rel="replies" type="application/atom+xml" href="http://example.com/wp/index.php/2013/04/19/article-title/feed/atom/" thr:count="0"/&gt;
          &lt;thr:total&gt;0&lt;/thr:total&gt;
      &lt;/entry&gt;
  &lt;/feed&gt;
  </code></pre>
  
  <p>Here's my JQuery ajax code to consume this feed and display it:</p>
  
  <pre><code>$.ajax({
      url: "//example.com/wp/index.php/feed?feed=atom&amp;cat=10",
      dataType: "xml",
      success: function(data) {
          console.log(data);
          var $xml = $(data),
              items = [];
  
          $xml.find("entry").each(function(i) {
              if (i === 30) return false;
              var $this = $(this);
              console.log($this);
  
              items.push('&lt;div&gt;&lt;h3&gt;' + $this.find("title").text() + '&lt;/h3&gt;&lt;p&gt;&lt;small&gt;Published by ' + $this.find("author").text().trim() + ' on ' + publisheddate.toDateString() + ' ' + publisheddate.toTimeString() + '&lt;/small&gt;&lt;/h3&gt;' + $this.find("content").text() + '&lt;/div&gt;&lt;hr /&gt;');
          });
          $("#displayDiv").html(items.join(''));
  </code></pre>
  
  <p>This is working!!
  I want to enhance this with a list of all the category tags for this entry as follows:</p>
  
  <pre><code>firstcategory | secondcategory | thirdcategory
  </code></pre>
  
  <p>If you look at the XML, you will notice there are three category elements in the sample entry.</p>
  
  <p>I've tried several methods and have failed miserably. I've reverted to working code from which I have extracted the above sample javascript, so I don't have my failed attempts left to show you.</p>