I have a basic HTML template:

<article>
    <h3>Being a Freelance Designer</h3>
    <p>Etiam porta sem malesuada magna euismod... <a href="#">Read more</a>
    </p>
</article>

I have an RSS feed, , and I am trying to pull the title and content of each RSS entry and create an <article>.

Each <article> is for an RSS entry, with the <h3> being the title and the <p> being the body. The <a> links back to the page article.

Can anyone help?

Here is a list of plugins that won't work as I need to load a feed from an external URL (These all use AJAX):

• /
• jFeed
• jQuery Feeds

I have a basic HTML template:

<article>
    <h3>Being a Freelance Designer</h3>
    <p>Etiam porta sem malesuada magna euismod... <a href="#">Read more</a>
    </p>
</article>

I have an RSS feed, http://www.justcode.us/feed, and I am trying to pull the title and content of each RSS entry and create an <article>.

Each <article> is for an RSS entry, with the <h3> being the title and the <p> being the body. The <a> links back to the page article.

Can anyone help?

Here is a list of plugins that won't work as I need to load a feed from an external URL (These all use AJAX):

• http://jsfiddle/SpYk3/Pp44S/
• jFeed
• jQuery Feeds

• javascript
• jquery
• html
• rss

• You'll probably have faster results if you stick to one script and find out how to use it. As it's now, the question is fairly off-topic here. This is a programmer's site were you could post part of your code and ask for advice on how to fix it, but it isn't the place to gather remendations about ready-to-use third-party scripts you can drop and start using. – Álvaro González Commented Apr 27, 2013 at 9:34
• @ÁlvaroG.Vicario I forgot to mention this, but I will edit it now, the key problem is fetching the feed from an external URL which means that I can't use AJAX. – Benedict Lewis Commented Apr 27, 2013 at 9:39

2 Answers 2

I took input from Clarkson's ideas and came up with

$.ajax({
            type: 'GET',
            url: 'feed.xml',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link_url").text();
                    var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                    $('#feedContainer').append('<article><h3>'+title+'</h3><p>'+description+link+'</p>');
                });
            }
        });

I then hosted the file on a local web server which allowed me to access it as it removed the restrictions placed by the web browser.

+ What do you mean?

You mean this following process?

1. Parse XML

2. Get Title, Description, Link from

   <item>
       <title>*Using CSS to Create an Image Hover*</title>
       <link>*http://www.justcode.us/2013/04/using-css-to-create-an-image-hover/*</link>
       <description>*~*</description>
   </item>
   

3. Create structure like following:

   <article>
       <h3>**Title**</h3>
       <p>**Description**<a href="**Link**">Read more</a>
       </p>
   </article>
   

+ How to process?

1. Parse XML

   If above process is right, You can use AJAX with dataType: "xml" like this.

   You can also use $.parseXML() like How to parse XML using jQuery?

2. Insert data to <article> /

   Now, I think you got **Title**, **Description**, **Link** from <item> ~ /

   You can use id attribute on article tag like <article id="idx">

   If you use loop for build structure, idx can be loop-num or article-num.

   All is done. now, just insert! :

   $("article#idx h3").html(**Title**);
   $("article#idx p").html(**Description** + "<a href=\"" + **Link** + "\">Read more</a>");