1

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!

Community
  • 1
  • 1
Torben Rasmussen
  • 55
  • 1
  • 8

1 Answers1

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)
    });
});
});
Community
  • 1
  • 1
super-qua
  • 3,148
  • 1
  • 23
  • 30
  • 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? – Torben Rasmussen Apr 23 '15 at 10:32
  • 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 `` tag in the HTML. Also make sure the jQuery is added – super-qua Apr 23 '15 at 10:40
  • 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 Apr 23 '15 at 10:44
  • 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? – Torben Rasmussen Apr 23 '15 at 11:24
  • 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 – super-qua Apr 23 '15 at 11:32
  • Perfect. Now it does exactly what I needed. Marked as answer. – Torben Rasmussen Apr 23 '15 at 11:47