Parsing multiple atom feeds throws error

Question

I have this script which will parse multiple feeds and render the items in divs with an id of content_1, content_2, etc, depending on how many feeds there are in the script.

See jsfiddle here.

However, the script only displays one of the feeds, and I keep getting an error: "Uncaught TypeError: Cannot read property '1' of null" pointing to this line of code:

$("#content_" + idno + " ul").append('<li><img src="' + img[1] + '"><a href="' + value.link + '" target="_blank">' + value.title + '</a><div class="small">' + pubDate + '</div><div class="description">' + value.contentSnippet + '</div></li>');

Anyone who can see what the problem is?

Answer 1

Try this..

    function GetFeeds() {
  var urls = ['http://www.futurity.org/feed/','https://theconversation.com/articles.atom'];
  urls.forEach(function(Query) {
    $.ajax({
      type: "GET",
      url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(Query),
      dataType: 'json',
      error: function() {
        console.log('Unable to load feed, Incorrect path or invalid feed');
      },
      success: function(xml) {
        $(".spinner").hide();
        var idno = parseInt(urls.indexOf(Query)) + 1;
        console.log('content_' + idno);
        console.log(xml.responseData.feed.entries);
        $.each(xml.responseData.feed.entries, function(idx, value) {
          var pubDate = value.publishedDate;
          var contentImg = value.content;
          var getImgSrc = /<img[^>]+src="([^">]+)"/;
          var img = getImgSrc.exec(contentImg);
          var firstImg = img.length ? img[1] : '';
          $("#content_" + idno + " ul").append('<li><img src="' + firstImg + '"><a href="' + value.link + '" target="_blank">' + value.title + '</a><div class="small">' + pubDate + '</div><div class="description">' + value.contentSnippet + '</div></li>');
        });
      }
    });
  });
}
GetFeeds();