Returning image with Google Feed API

Question

Returning image with Google Feed API

Navigation

#1 by (2 votes)

0

I'm 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><divclass="container">
  <div id="teste"></div>
</div>

But the part of the images only returns undefined, does anyone know to explain to me what I'm doing wrong?

If someone has the same question to control the number of iterations, just add if(key<1){ inside $ .each with return false; '

jquery google-api rss

asked by anonymous 12.11.2014 / 17:48

1 answer

Number sequence How to separate tables in the same HTML that uses JavaScript and display the result in boxes

score 2 · Accepted Answer

Do you see undefined ? You are adding a value that does not exist during the XML iteration to the resulting string.

Within this iteration you need to iterate through the collection of images and mount the < img / >:

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 jQuery.find () to create a jQuery manipulable object of the images, so I can get the src property