CODEWITHSUNDEEP
javascriptjqueryhtmlxmlrss
Torben Rasmussen
Torben Rasmussen

Reputation: 55

Parse RSS title into HTML using Javascript

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!

Upvotes: 1

Views: 3741

Answers (1)

super-qua
super-qua

Reputation: 3188

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)
    });
});
});

Upvotes: 1

Related Questions