Question

I have this code which works at retrieving data from You Tube. I can see this by the alert message. The problem is in IE8 and below, it doesn’t output the list of 3 items to the page. It only outputs the last image.

You can view the code here on jsfiddle

Any help much appreciated.

$.each(data.feed.entry.slice(1, 4), function(i, item) {
                        //if(i == 3) return false;
                        var title = item.title.$t;
                        var url = item.link[0].href;
                        var thumbUrl = item.media$group.media$thumbnail[0].url;
                        thumbs_data += '<li><a href="'+ url +'" title="'+ title +'"><img alt="'+ title+'" src="'+thumbUrl+'"</a></li>';
                        alert(thumbs_data);
                    });

Answer 1

After looking at the code in IE8, one possible problem may be that item.title.$t has quotation marks in it which I think may be messing up your generated HTML. You could try remove the quote marks by changing this:

var title = item.title.$t;

to this:

var title = item.title.$t.replace(/"/g, "");

And, the other problem I found is that you are missing a closing brace on the img tag in your generated HTML.

---

Change the thumbs_data line to this to add the closing > for the img tag:

thumbs_data += '<li><a href="'+ url +'" title="'+ title +'"><img alt="'+ title+'" src="'+thumbUrl+'"></a></li>';

Once you fix those, you can see this jsFiddle work in IE8: http://jsfiddle.net/jfriend00/7L2Ws/

Note: I found this problem by outputting the generated HTML you were adding to thumbs_data to console.log() each time through the loop so I could look at the HTML to see where the problems were.