I am trying to display an RSS feed in HTML. It works on iPad, iPhone and chrome but not in internet explorer or safari. I get an error message saying
x[i].getElementsByTagName("image")[1] is undefined
Does anyone know how I can get this to work? It is using an Apple RSS feed to display apps from the App Store. The error is occurring at the first document.write. I am trying to display the returned results in a table also.
<html>
<head>
<title>RSS Apps</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://itunes.apple.com/au/rss/topfreeapplications/limit=10/xml?partnerId=1002&partnerUrl=http%3A%2F%2Fwww.s2d6.com%2Fx%2F%3Fx%3Dc%26z%3Ds%26v%3D3868801%26t%3D",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("feed");
for (i=0;i<x.length;i++)
{
document.write("<a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+"><img src=" + x[i].getElementsByTagName("im:image")[1].childNodes[0].nodeValue +"></a>");
document.write("</td><td>");
document.write("<a href="+x[i].getElementsByTagName("id")[2].childNodes[0].nodeValue+"><img src=" + x[i].getElementsByTagName("im:image")[4].childNodes[0].nodeValue +"></a>");
document.write("</td><td>");
document.write("<a href="+x[i].getElementsByTagName("id")[3].childNodes[0].nodeValue+"><img src=" + x[i].getElementsByTagName("im:image")[7].childNodes[0].nodeValue +"></a>");
document.write("</td></tr><tr><td>");
document.write("<font size=\"1\"><a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+">" + x[i].getElementsByTagName("name")[1].childNodes[0].nodeValue+"</a>");
document.write("</td><td>");
document.write("<font size=\"1\"><a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+">" + x[i].getElementsByTagName("name")[2].childNodes[0].nodeValue+"</a>");
document.write("</td><td>");
document.write("<font size=\"1\"><a href="+x[i].getElementsByTagName("id")[1].childNodes[0].nodeValue+">" + x[i].getElementsByTagName("name")[3].childNodes[0].nodeValue+"</a>");
}
</script>
</td></tr>
</table>
</div>
</body>
</html>
Updated code to handle “im:image” and the code now works in internet explorer and safari but not in chrome.
This will give a result. DEMO
Notice I access the
entryelements and in the entries I access the im:image tagsUPDATE This works in IE8, Fx Safari and Chrome on XP
UPDATE 2
jQuery version DEMO