How do I put this RSS feed in a jQuery listview?

Question

Okay I found this RSS plugin and I want to display it inside a webpage, but I want it to be in a jQuery listview, so each item is a list item, could someone please explain to me how to do it? I put the jsfiddle link below! Thanks
http://jsfiddle.net/8qhZP/
And this is the actual source where I found the plugin
http://www.jquery4u.com/plugins/jquery-rss-feed-display-live/

Not quite yet! I'll be sure to reward the bounty soon tho! – William Lewis Jan 26 '12 at 16:03 — William Lewis, Jan 26 '12 at 16:03

score 3 · Accepted Answer · answered Jan 24 '12 at 01:40

Easiest way to accomplish this is to get the RSS feed converted into a JSON object. This way you can call the url using JSONP and then parse the output using a jQuery template engine.

1) Convert the RSS feed into a JSON feed using Yahoo pipes (can also combine RSS feeds)

http://jquery4u.com/rss/

into

Yahoo JSON Pipe Output

2) Render the JSON feed using a jQuery templating engine like json2html

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://json2html.com/js/jquery.json2html-2.5-min.js"></script>

<script type="text/javascript">
var transform = {tag:'li',children:[
                    {tag:'a',src:'.link',html:'.title'},
                    {tag:'br'},
                    {tag:'span',html:'.description'}
                ]};

$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_callback=?", {"_id":"f5e0edec7594378e719cf18c53f8a26c","_render":"json"}, function(data){
    $('#rssFeed').json2html(data.value.items,transform);
});   
</script>

<ul id='rssFeed'></ul>

score 2 · Answer 2 · edited May 23 '17 at 10:24

If you are not forced to use the jquery feed rss live plugin you point out, then you could use that other plugin: Parse RSS with jQuery.

It's also discussed on another post on stackoverflow: parse rss with jquery with examples and some documentation.

So, reusing the example given by Nathan Strutz you could just do something like:

   jQuery.getFeed({
      url: 'your url',
      success: function(feed) {
         //append your list element and then refresh the list
         $('#myList').append('<li>'+feed.title+'</li>');
         $('#myList').listview('refresh');
      }
   });

Hope it fits your needs.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

The RSS plugin seems to generate a list by default. The demo page generates paragraphs, but that's because it's explicitly configured to do that in the source with this line:

newsfeed.setentrycontainer("p");

Taking this line out of the config should generate the html list.

I don't know much about the jQuery listview (it's for mobile pages right?), but I guess that if you initialise the jQuery listview after the RSS feed is loaded, it should work.

Good luck!

How do I put this RSS feed in a jQuery listview?

3 Answers3