Parse RSS title into HTML using Javascript

Question

I am trying to populate a menu on a webpage with the 5 latests topics from our site's RSS newsfeed using Javascript (e.g. jQuery - we import v. 1.9.1 already), and I have been trawling the content in here to find something that work, but the answer most suiting my problem seems to be using deprecated scripts.

The RSS feed is stored on our own server, so reading rights should be ensured. I would prefer using Javascript of some sort and I simply need to have the titles of e.g. the latest X news and their links tossed into

<li><a href="Link to article">first news header</a></li>
<li><a href="Link to article">second news header</a></li>

One of the answers in here led me to this JSfiddle:Code but it doesn't seem to work? Another answer in here code gives a jQuery code that I have no clue how to utilize in my HTML afterwards, so it might as simple as guiding me to the use of this?

I have very limited experience using JS, so I would greatly appreciate some pretty low-tech advice on how to get things working both in terms of what to include in a .js file and how to make it appear in my HTML afterwards.

The news feed is here:Link

Thanks!

There are lots of plugins for feed readers. Find one with good documentation — charlietfl
– charlietfl, Commented Apr 23, 2015 at 9:42

Community · Accepted Answer · 2017-05-23 11:58:30Z

1

Based on the answer you found as well, I put together a jsfiddle for testing purposes. (note that I'm using a predefined XML string in the fiddle since I can't access the RSS feed on the domain)

Here's the code explanation

Simple HTML:

<ul id="feed">
</ul>

Javascript:

$(document).ready(function(){

var x=10; // your X iteration limit

// load the xml data. it is parsed by jquery
$.get("http://www.flatpanels.dk/rss/nyhed.xml", function(data) {
    var $xml = $(data);

    $xml.find("item").each(function(i, val) { // find the items in the rss and loop

        // create an item object with all the necessary information out of the xml
        var $this = $(this),
            item = {
                title: $this.find("title").text(),
                link: $this.find("link").text(),
                description: $this.find("description").text(),
                pubDate: $this.find("pubDate").text(),
                author: $this.find("author").text(),
                guid: $this.find("guid").text()
        };
        // replace the CDATA in the item title
        item.title = item.title.replace("<![CDATA[", "").replace("]]>", "");

        // #feed selects the ul element with the id feed
        // and append() appends a newly created li element
        // to the ul
        $('#feed').append($('<li><a href="' +item.guid +'">' +item.title +'</a></li>'));

        return i<(x-1); // (stop after x iterations)
    });
});
});

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Apr 23, 2015 at 9:59

super-qua

3,1881 gold badge25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Torben Rasmussen Over a year ago

That looks pretty good. Just to make it clear to the slow guy in the back (me), you would just put the JS in a script to include on the page and things should then things would work? Or should a "onpageload" be used somehow to make the code auto-populate my menu?

super-qua Over a year ago

I edited my answer and added a $(document).ready() which runs the enclosed javascript part as soon as the document is loaded. You are correct, you would just put the JS in a script file and include it in a <script...></script> tag in the HTML. Also make sure the jQuery is added

Torben Rasmussen Over a year ago

I really appreciate the effort. I will give it a go when I have tucked in the kids tonight and report back. Thank you!

Torben Rasmussen Over a year ago

I couldn't wait until tonight, so I tried it right away :-) It works like a charm, but you need to remove the complete URL to the XML-file and replace it with the relative path to the folder. But it loads nicely! If I would like to only extract X number of items, what would I change?

super-qua Over a year ago

I updated the answer again. the each() loop stops as soon as you return false. so return i<(x-1) stops the iteration after x items

|

Collectives™ on Stack Overflow

Parse RSS title into HTML using Javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related