Forums

Maddtechwf

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?

Mottie

Maybe check out the jQuery Google Feed Plugin (you don't need an API key anymore)

Maddtechwf

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.

Maddtechwf

<rss>
           <channel>
                   <item>
                       <title></title>
                       <link></link>
                       <pubDate></pubDate>
                       <guid></guid>
                       <dc:date></dc:date>
                   </item>
                   <item>
                       <title></title>
                       <link></link>
                       <pubDate></pubDate>
                       <guid></guid>
                       <dc:date></dc:date>
                   </item>
                   <item>
                       <title></title>
                       <link></link>
                       <pubDate></pubDate>
                       <guid></guid>
                       <dc:date></dc:date>
                   </item>
                   <item>
                       <title></title>
                       <link></link>
                       <pubDate></pubDate>
                       <guid></guid>
                       <dc:date></dc:date>
                   </item>
              </channel>
         </rss>

Maddtechwf

Anyone have any suggestions?

rosspenman

RSS is just XML, so you should be able to use jQuery's XML capabilities ($.parseXML()).

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

Maddtechwf

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

margaux

Would you consider using php to do this?

Maddtechwf

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

rosspenman

You can do it with $.parseXML().

Example:

$.ajax("rss_url", function(rss) {

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

    $("ul").append($("<li>", {html: $(this).html()}));

  });
});

Maddtechwf

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


<!DOCTYPE html>
  
    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.

Maddtechwf

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

treehouse : what would you like to learn today?

Forums

[Solved] Reading RSS with JQuery