Returning Image with Google Feed API

Question

I am trying to return the image of an rss feed using the Google Feed API and Jquery

function parseRSS(url, location, container) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //console.log(data.responseData.feed);
      $(location).prepend('<h3>' + capitaliseFirstLetter(data.responseData.feed.title) + '</h3>').append('<ul id="rsslist"></ul>');

      $.each(data.responseData.feed.entries, function(key, value) {
        var thehtml =
          '<li>' + value.title + '</li>' +
          '<li>' + value.link + '</li>' +
          '<li>' + value.image + '</li>';
        $('#rsslist').append(thehtml);
      });
    }
  });
}

function capitaliseFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
parseRSS('http://globoesporte.globo.com/Esportes/Rss/0,,AS0-9859,00.xml', '#teste', 'ul');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="teste"></div>
</div>

But the part of the images only returns Undefined, someone can explain me what I’m doing wrong?

If someone has the same question to control the number of iterations just add one if(key<1){ within $.each with Return false;`

Answer 1

Are you seeing the Undefined? You are adding to the resulting string a value that does not exist during the XML iteration.

Within this iteration you need to iterate the image collection and mount the <img tags />:

function parseRSS(url, location, container) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //console.log(data.responseData.feed);
      $(location).prepend('<h3>' + capitaliseFirstLetter(data.responseData.feed.title) + '</h3>').append('<ul id="rsslist"></ul>');

      $.each(data.responseData.feed.entries, function(key, value) {
        var thehtml =
          '<li>' + value.title + '</li>' +
          '<li>' + value.link + '</li>';

          $.each($( value.content ).find( 'img' ), function(k, image) {
              console.log( image );
              thehtml += '<li><img src="' + image.src + '" /></li>';
          });
          
        $('#rsslist').append(thehtml);
      });
    }
  });
}

function capitaliseFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
parseRSS('http://globoesporte.globo.com/Esportes/Rss/0,,AS0-9859,00.xml', '#teste', 'ul');

<div class="container">
  <div id="teste"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But as they have several other tags besides the image which is what you want you need to filter this collection. I used for this jQuery.find() to create a jQuery manipulable object of the images, being able to obtain the property src