CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-extensionrss
Elbbard
Elbbard

Reputation: 2164

Read media\\:thumbnail RSS feed with Jquery

I'm writing a chrome extension and I'm trying to get the RSS feed "media:thumbnail" but the function el.find('media\:thumbnail').attr('url') outputs 'undefined'.

Here's my code :

$.get("http://www.reddit.com/.rss", function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        $("tbody").append("<tr><th>" + el.find('media\\:thumbnail').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>"); 
    });
});

Upvotes: 0

Views: 1461

Answers (4)

Luke T O&#39;Brien
Luke T O&#39;Brien

Reputation: 2845

I cannot believe that people do not understand this question and give an answer about something else.
The questioner does not mention CORS or any possible error that could point to it.
The question is simply asking about JQuery selectors on XML nodes rather than HTML, the fact that he is using AJAX to get an RSS feed is irelivant, so one can assume that CORS is not an issue in this case.

I had been struggling with the exact same thing, apparently double backslash is supposed to escape, but doesn't seem to work in this case.

What I did instead is use the JQuery attribute selector with the attribute url, all thumbnails have url attributes in my case.
So your code would be:

$.get("http://www.reddit.com/.rss", function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        $("tbody").append("<tr><th>" + el.find('[url]').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>"); 
    });
});

Update

It might be better to use map

$.get("http://www.reddit.com/.rss", function (data) {
  var tbody = $('tbody');
  tbody.append(
    $(data).find("item").map(function () { // or "item" or whatever suits your feed
      var el = $(this);
      return $("<tr><th>" + el.find('[url]').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>"); 
    }).get()
  );
});

I have tested it mind

Upvotes: 0

Elbbard
Elbbard

Reputation: 2164

I found a workaround. I use the element "description" of the RSS feed. It contains the link to the image.

Xml :

<description>
<table> <tr><td> <a href="http://www.reddit.com/r/funny/comments/2vbpix/cat_walks_into_a_bar/"><img src="http://b.thumbs.redditmedia.com/50jHjrHnJTSIX_Q86UUXe1Kc-rAxYyhEd90GeUDJHao.jpg" alt="Cat walks into a bar." title="Cat walks into a bar." /></a> </td><td> submitted by <a href="http://www.reddit.com/user/_dear_ms_leading_"> _dear_ms_leading_ </a> to <a href="http://www.reddit.com/r/funny/"> funny</a> <br/> <a href="http://i.imgur.com/AR14Y61.jpg">[link]</a> <a href="http://www.reddit.com/r/funny/comments/2vbpix/cat_walks_into_a_bar/">[69 commentaires]</a> </td></tr></table>
</description>

Jquery : 

$('' + el.find('description').text()).find("img").attr("src")

Upvotes: 0

Dusan Krstic
Dusan Krstic

Reputation: 705

Here is the scripts that will help

First, you need a server script that will pick crosdomain content

<?php // crossdomain php script
header('Content-type: application/xml');
header('Access-Control-Allow-Origin: *');
ini_set('error_reporting', E_WARNING );
$str_xml = '';
if ($_POST['source'] === 'reddit') {
    $str_xml = file_get_contents('http://www.reddit.com/.rss');
}
die($str_xml);
?>

Then make Ajax requests and parse response xml

$.ajax({
    type: "POST",
    url: "crossdomain.php",
    dataType: "xml",
    data:{source:"reddit"},
    success: function(xml){
        var xmlText = new XMLSerializer().serializeToString(xml);
        $(xmlText).find("media\\:thumbnail").each(function(){
             $("tbody").append("<tr><th>" + $(this).attr('url') + "</th><td>" + $(this).parent().find("title").text() + "</td></tr>");
        });
    }
  });

Upvotes: 0

Kai Mattern
Kai Mattern

Reputation: 3085

There is something in JS that is called "same origin policy". It means that you cannot query stuff, that is not from the same domain, using the same protocol and uses the same subdomain.

You need to research "cors" to make calls to another domain possible, but in this case, this won't help you. Cors needs you to include stuff in the http response header.

Another way out is to configure your web server as a reverse proxy and mask the requests from reddit as a local call.

Upvotes: 3

Related Questions