for.. in going extra time but only in IE8?

I have tried figuring this out on my own but am out of ideas.

I have a loop that just makes list items by looping through an array. But it seems to be doing an EXTRA loop each time, therefore pulling an undefined element. e.g. my array stops at albums[0] but it goes ahead and tries to do it for albums[1] which doesn't exist. weirdness ensues, more specifically, it ends up pulling the text from my filter function??

how come this doesn't happen in chrome? this is where it happens in ie8 http://dl.dropbox.com/u/1261672/groovyBox2222/guts/artists.html?Hackers-vs-Slackers&

 getPlaylist(function(songs) // pulls out songs matching a开发者_StackOverflow社区rtist
 {

    var albums = new Array();
    for (obj in songs){
        if (songs[obj]["artist"] == artist){
            albums.push(songs[obj]["album"]);
        }

        albums = removeDuplicateElement(albums);
    }
    var albumname;
    for (x in albums){ // creates LI of albums
        albumname = '<li><a href="albums.html?'+escape(albums[x])+
           '&'+escape(artist)+'">'+albums[x]+"</a></li>";
        $('#albumlist').append(albumname);
    }
};

Never use for in when looping over an array... it's unpredictable. Use this instead:

for (var i = 0; i < albums.length; i++) {
    var obj = albums[i];
}

You are using a 'foreach' loop, which is causing the problem. Do this instead:

for (var i = 0; i < albums.length; i++)
{
    // your code
}