2

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):

Benedict Lewis
  • 2,733
  • 7
  • 37
  • 78
  • 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 recommendations about ready-to-use third-party scripts you can drop and start using. – Álvaro González Apr 27 '13 at 09: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 Apr 27 '13 at 09:39

2 Answers2

6

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.

Benedict Lewis
  • 2,733
  • 7
  • 37
  • 78
2

+ 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>");
Community
  • 1
  • 1
jeyraof
  • 863
  • 9
  • 28