I'm trying to make a menu with artist names and images pulled from the last.fm API. Currently, it generates the list of images and names fine, except it prints "undefined" at the top of the list. I've tried commenting out the part that populates the elements with artist names/images, and just had it generate the elements, but it still prints undefined. I'm totally stumped as to what it's saying is undefined.First it makes an AJAX call to get the information it needs:\[code\] if (window.XMLHttpRequest) { // Non-IE browsershttpRequest = new XMLHttpRequest();}else if (window.ActiveXObject) { // IE 8 and olderhttpRequest = new ActiveXObject("Microsoft.XMLHTTP");}httpRequest.open("GET", 'http://ws.audioscrobbler.com/2.0/?method=chart.gettopartists&api_key=b25b959554ed76058ac220b7b2e0a026&format=json', true);httpRequest.onreadystatechange = function () {var done = 4, ok = 200;// Parse the JSON into JavaScript immediately on receiptif (httpRequest.readyState == done && httpRequest.status == ok) { artistList = JSON.parse(httpRequest.responseText);\[/code\]Then it processes that information and generates HTML that it implements with inner.HTML\[code\]var artistsAndImage = {};for (var i=0; i < artistList["artists"]["artist"].length; i++) {var name = artistList["artists"]["artist"]["name"];artistsAndImage[name] = artistList["artists"]["artist"]["image"][0]["#text"];};var code;// Generate HTML for sidebar with artist names and iamgesfor (var name in artistsAndImage) {nameid = name. replace(/ /g, "_"). replace(/&/g, ":amp"). replace(/\+/g, "
lus");code += "<element id=\"" + nameid + "\" onclick=\"details(this)\">\n<p style = \"cursor:default\">\n <img src=http://stackoverflow.com/"" + artistsAndImage[name] + "\" alt=\"alt\" width = \"50\" height = \"50\">\n" + name + "\n</p> </element>\n";}; document.getElementById("sidebar").innerHTML = "<div style = \"padding:20px\">" + code + "</div>";\[/code\]Where's the "undefined" coming from, and how can I fix it? You can see the current incarnation of the page uploaded here: http://test.yukot.corp.he.net/
lus");code += "<element id=\"" + nameid + "\" onclick=\"details(this)\">\n<p style = \"cursor:default\">\n <img src=http://stackoverflow.com/"" + artistsAndImage[name] + "\" alt=\"alt\" width = \"50\" height = \"50\">\n" + name + "\n</p> </element>\n";}; document.getElementById("sidebar").innerHTML = "<div style = \"padding:20px\">" + code + "</div>";\[/code\]Where's the "undefined" coming from, and how can I fix it? You can see the current incarnation of the page uploaded here: http://test.yukot.corp.he.net/