Using jQuery.parseXML

Question

I am trying to create an aggregator that will pull items from an RSS feed and store them in a jQuery array (so that I can cycle through the array and randomise output).

I have found some info on using jQuery.parseXML for this however the demo provided I cannot figure out as I don't have much knowledge in the area and the demo doesn't show anywhere where the link to the RSS feed is added?

<p id="someElement"></p>
<p id="anotherElement"></p>

<script>
var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
  xmlDoc = $.parseXML( xml ),
  $xml = $( xmlDoc ),
  $title = $xml.find( "title" );

// Append "RSS Title" to #someElement
$( "#someElement" ).append( $title.text() );

// Change the title to "XML Title"
$title.text( "XML Title" );

// Append "XML Title" to #anotherElement
$( "#anotherElement" ).append( $title.text() );
</script>

Where do I add my RSS feed link? And where is the array made?

Ultimately this will be a mosaic wall with all the items output visually in HTML.

The data I have from the RSS feed for each item is:

• title
• description
• link
• published date
• category

I need to pull all this data through so I can output title, description, wrap the two in the link tag, and then store the category and use the stored publish date to randomise output (select last 30 days for example and output those items in a random order).

Here is the code I have written using the Ajax page but I don't know if that's right or what it should do to work....

jquery.ajax(http://www.sagittarius-digital.com/news.rss [, dataType xml])

Answer 1

You don't need to use $.parseXml() when you call the rss feed via ajax with a dataType of 'xml'.

$.ajax({
    url:'news.rss',
    dataType:'xml',
    success:function( xmlString ){
        var $xml = $( xmlDoc ),
        $title = $xml.find( "title" );

        $title.each(function(){
            console.log($(this).text());
        });
    }
});

Remember the RSS url needs to be in the same domain the javascript file is in. If not, then you will need to do some server-side logic, cURL for example, to get the rss feed.

Answer 2

Try something like

  jQuery(function(){
    $.ajax({
      url: 'news.rss', //place the your rss feed url here
      dataType: 'xml'
    }).done(function(xml){
      var items = $(xml).find('item').map(function(){
        var $item = $(this);
        var array = ['<li>'];
        array.push('<a href="' + $.trim($item.find('link').text()) + '">')
        array.push('<h3>' + $item.find('title').text() + '</h3>')
        array.push('</a>');
        array.push('<p>' + $item.find('description').text() + '</p>');
        array.push('<span class="category">' + $item.find('category').text() + '</span>')
        array.push('<span class="pub-date">' + $item.find('pubDate').text() + '</span>')
        array.push('</li>');
        return array
      }).get();
      $('ul').append(items.join(' '));
    }).fail(function(){
      conole.log('error', arguments)
    })
  })

Demo: Plunker