0

Estou tentando retornar a imagem de um feed rss usando a Google Feed API e 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>

Porém a parte das imagens só retorna undefined, alguém sabe me explicar o que estou fazendo de errado?

Caso alguém fique com a mesma dúvida para controlar o número de iterações é só adicionar um if(key<1){ dentro do $.each com return false;`

1 Resposta 1

2

Está vendo o undefined? Você está adicionando à string resultante um valor que não existe durante a iteração do XML.

Dentro dessa iteração você precisa iterar a coleção de imagens e montar as tags <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>

Mas como têm várias outras tags além da imagem que é o que você quer você precisa filtrar essa coleção. Eu usei para isso jQuery.find() pra criar um objeto jQuery manipulável das imagens, podendo obter a propriedade src

4
  • tu pode me dar uma dica de como manipular a quantidade dos feeds que vão aparecer? Já que o $each percorre todas entradas
    – haykou
    12/11/2014 às 17:50
  • 1
    Condiciona o valor de key do primeiro jQuery.each() com algum valor e se o teste retornar verdadeiro você dá um return false; 12/11/2014 às 18:15
  • vou atualizar a pergunta, deu certo :)
    – haykou
    12/11/2014 às 18:41
  • Vou corrigir sua edição. Não é antes, é dentro. :p 12/11/2014 às 18:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .