Parsing links from an XML files with JavaScript

Question

To display my latest blog-posts on a different page I want to parse the rss-feed from the blog and then generate elements with it.

I first tried to parse a fixed .xml file for which I wrote the following code:

    var maxBlogposts = 5;
    var blogPosts = 0;
     $.get("rss.xml", function(data) {
        $(data).find("item").each(function() {
            if(blogPosts === maxBlogposts) return;
            var el = $(this);

            //Only display 3 posts on small devices.
            var extra = (blogPosts >= 3) ? "not-small 12u(small)" : "12u(small)";
            var div = $('<div class="6u ' + extra + '" class="blog-entry"></div>');
            var h = $('<h4><a href="' + el.find("link").text() + '">' + el.find("title").text() + '</a></h4>');
            var description = el.find("description").text().replace('[&#8230;]', '<a href="' + el.find("link").text() + '">[&#8230;]</a>');
            var p = $('<p>' + description + '</p>');
            div.append(h);
            div.append(p);
            $('#blog').append(div);
            blogPosts++;

        });
    });

This worked perfectly fine. Now I want to parse the actual rss-feed. For this I wrote a PHP script which simply gets the feed and echos it.

<?php

$rss = file_get_contents('http://xn--der-grne-baum-1ob.net/feed/');
die($rss);

?>

And again I get the correct XML file on the frontend.

The problem I have is that now my code is no longer working. Getting the description was failing as well as the links. I fixed the description by accessing

 el.find(description")[0].innerHTML

However I can't seem to get the links to work. The data returned from the PHP file contains a node with the link in it. The "el"-element also contains children named "link" but those no longer contain the actual link.

I feel like the links may get "escaped" during parsing? At least that is the only reason i could think of that would result in what I am observing.

The XML I am parsing comes from http://xn--der-grne-baum-1ob.net/feed/

Added an example and the site I am working on with the found "el" getting logged in the console. — H_end-rik
– H_end-rik, Commented Feb 28, 2015 at 16:33

guest271314 · Accepted Answer · 2015-02-28 17:22:39Z

1

Try

var maxBlogposts = 5
, blogPosts = 0;

$.get("https://query.yahooapis.com/v1/public/yql?q=select"
     + " * from feed where url='http://xn--der-grne-baum-1ob.net/feed/'")
.then(function(data) {
  $(data.documentElement).find("results item")
  .each(function() {
            if(blogPosts === maxBlogposts) return;
            var el = $(this);

            //Only display 3 posts on small devices.
            var extra = (blogPosts >= 3) ? "not-small 12u(small)" : "12u(small)";
            var div = $('<div class="6u ' + extra + '" class="blog-entry"></div>');
            var h = $('<h4><a href="' + el.find("link").text() + '">' + el.find("title").text() + '</a></h4>');
            var description = el.find("description").text().replace('[&#8230;]', '<a href="' + el.find("link").text() + '">[&#8230;]</a>');
            var p = $('<p>' + description + '</p>');
            div.append(h);
            div.append(p);
            $('#blog').append(div);
            blogPosts++;

        });
  }, function(jqxhr, textStatus, errorThrown) {
     console.log(textStatus, errorThrown)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blog"></div>

See YQL Console

answered Feb 28, 2015 at 17:22

guest271314

1

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

3 Comments

H_end-rik Over a year ago

Hi, thanks that's working fine. Still wondering though why my approach wasn't working on the parsing part.

guest271314 Over a year ago

Tried with $(data.documentElement) ? Utilized yql as resource not appear cors enabled ?

H_end-rik Over a year ago

Not sure what you are asking to be honest.

Collectives™ on Stack Overflow

Parsing links from an XML files with JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related