I'm developing a Chrome extension and trying to add my website RSS Feed with images in the extension using Google Feed API. But its throwing error
Uncaught TypeError: Cannot read property '0' of undefined
Here's the Script
function myGetElementsByClassName(selector) {
if ( document.getElementsByClassName ) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for ( var i = 0; i < max; i++ ) {
if ( nodes[i].className == selector ) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var img = new Image();
img.src = entries[i].mediaGroups[0].contents[0].url;
listItem.appendChild(img);
var listItem = document.createElement('li');
var title = entries[i].title;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
// listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
<div class="post_results" id="post_results1" rss_num="4" rss_url="http://www.pixlov.com/feed">
<div class="loading_rss">
<img alt="Loading..." src="https://www.script-tutorials.com/demos/82/images/loading.gif" />
</div>
</div>
The Problem is with this line
img.src = entries[i].mediaGroups[0].contents[0].url;
But the weird Thing is that when I add Feed link of this website http://mightydeals.com/feed then it works!.
The issue is in feed url. the response of the feed url data not contains the mediaGroups property. So when your are trying to get the index 0 value from it, it's throwing 0 index error. To resolve the issue first you need to check the response data contains the the mediaGroups key or not. Like if(entries[i].mediaGroups && entries[i].mediaGroups.length >0)