4

I am trying to retrieve the images (along with other content) from media:content for each post in an RSS feed: http://bits.blogs.nytimes.com/feed/

I tried this link (along with many others) jQuery XML parsing how to get element attribute but I am still getting errors.

There is a PHP file as well (see at bottom) but I don't think that it is the issue.

I have tried several variations and I am ending up with <img src="undefined" alt="image">

This is what the log is saying TypeError: 'undefined' is not an object (evaluating '$item.find('media\\:content').attr('url').text')

Here is an example of the XML from the RSS feed (I am trying to grab what is in url="this value") <media:content url="http://graphics8.nytimes.com/images/2011/11/30/technology/bits-daily-report/bits-daily-report-thumbStandard.jpg" medium="image" width="75" height="75"></media:content>

Here is my HTML with jQuery Embeded. Thank you for all solutions, pointers, and Suggestions. I am hitting a roadblock right now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Your Site Title</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

function get_rss_feed() {

// RSS Feed Var
var rssUrl = 'http://bits.blogs.nytimes.com/feed/';

//clear the content in the div for the next feed.
$("#feedContent").empty();

//use the JQuery get to grab the URL from the selected item, put the results in to an argument for parsing in the inline function called when the feed retrieval is complete
$.get('rss.php?url='+rssUrl, function(d) {

    //find each 'item' in the file and parse it
    $(d).find('item').each(function() {

        //name the current found item this for this particular loop run
        var $item = $(this);
        // grab the post title
        var title = $item.find('title').text();
        // grab the post's URL
        var link = $item.find('link').text();
        // next, the description
        var description = $item.find('description').text();
        //don't forget the pubdate
        var pubDate = $item.find('pubDate').text();
        var media = $item.find('media\\:content').attr('url').text();

            // now create a var 'html' to store the markup we're using to output the feed to the browser window
        var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>";
        html += "<em class=\"date\">" + pubDate + "</em>";
        html += "<p class=\"description\">" + description + "</p>";
        html += "<img src=\"" + media + "\" alt=\"image\"/>";
        html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";

        //Send Results to a div
        $('#rss').append($(html));  
    });
});

};
get_rss_feed();

  });
</script>
</head>

<body>
<h1>RSS TEST</h1>
<!-- Your RSS DIV -->
<div id="rss"></div>

</body>
</html>

Here is my PHP

<?php

  ob_start();

  $curl = curl_init($_GET['url']);

  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl, CURLOPT_HEADER, false);

  $xml = curl_exec($curl);  
  header("Content-Type: text/xml");
  echo $xml; // Results

  $output = ob_get_clean();

  curl_close($curl);
  echo $output;

  ob_end_flush();


?>
Community
  • 1
  • 1
user1686851
  • 101
  • 1
  • 6

1 Answers1

6

This: 

var media = $item.find('media\\:content').attr('url').text();

Should be this: 

 var media = $item.find('media\\:content, content').attr('url'):

EDIT (addition of other changes made):

I changed:

$(d).find('item').each(function() {

To:

$(d).find('item').each(function(index) {

I added (to limit to three feed items):

if (index >= 3) { return false }

And I added (if there was no image defined set to blank image):

if (typeof mediatest === 'undefined') { var mediatest = 'blank.png' };

Everything works great...at least so far :)

user1686851
  • 101
  • 1
  • 6