Reading RSS with JQuery

  • TWG
    # January 16, 2013 at 5:07 pm

    I have an RSS feed that I want to read using JQuery and take the data and populate a list with. Can anyone give me a shove in the right direction?

    # January 16, 2013 at 5:16 pm

    Maybe check out the [jQuery Google Feed Plugin](http://jquery.malsup.com/gfeed/) (you don’t need an API key anymore)

    TWG
    # January 16, 2013 at 5:36 pm

    This reply has been reported for inappropriate content.

    That didn’t really cover what I was needing.

    The RSS feed that I’m trying to read into a UL is structured like this.

    TWG
    # January 16, 2013 at 5:37 pm

    This reply has been reported for inappropriate content.

    <br />
    

    TWG
    # January 25, 2013 at 10:00 am

    This reply has been reported for inappropriate content.

    Anyone have any suggestions?

    # January 25, 2013 at 7:58 pm

    RSS is just XML, so you should be able to use [jQuery’s XML capabilities (`$.parseXML()`)](http://api.jquery.com/jQuery.parseXML/).

    Then you can navigate it just as you would any other DOM.

    TWG
    # January 28, 2013 at 9:48 am

    This reply has been reported for inappropriate content.

    The link you provided just shows it outputing XML. I need it to read an RSS feed and have it populate a UL.

    # January 28, 2013 at 9:58 am

    Would you consider using php to do this?

    TWG
    # January 28, 2013 at 11:18 am

    This reply has been reported for inappropriate content.

    I can’t use PHP. My network admin does not allow PHP.

    # January 28, 2013 at 1:30 pm

    You can do it with `$.parseXML()`.

    Example:

    $.ajax(“rss_url”, function(rss) {

    xml = $.parseXML(rss);
    $(xml).find(“item title”).each(function() {

    $(“ul”).append($(“

  • “, {html: $(this).html()}));

    });
    });

TWG
# January 30, 2013 at 11:55 am

This reply has been reported for inappropriate content.

So I finally got it to work but I used a little different code.




XML & AJAX


$(document).ready(function(){
$.ajax({
type: "GET",
url: "NewsFeed.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var title = $(this).find('title').text();
var link = $(this).find('link').text();
var date = $(this).find('pubDate').text();
$('
  • ').html('' + title + '
  • ').appendTo("#news");
    });
    }
    });
    });






      I can’t get the styling of my UL elements correct. I want each LI to have a hyperlink wrapped around the title followed by the date it was published without the link wrapped around it.

      TWG
      # January 30, 2013 at 2:04 pm

      This reply has been reported for inappropriate content.

      Never mind, I caught my mistake. I was escaping the hyperlink to early.

      Viewing 12 posts - 1 through 12 (of 12 total)

      You must be logged in to reply to this topic.

      There's a whole bunch of content on CSS-Tricks.

      Search for Stuff   •   Browse the Archives

      Get the Newsletter ... or get the RSS feed