Javascript生成的HTML还会打印“ undefined”

Question

我正在尝试制作一个菜单，其中包含从last.fm API中提取的艺术家姓名和图像。 当前，它会生成图像和名称列表，但它会在列表顶部打印“ undefined”。 我尝试注释掉用艺术家名称/图像填充元素的部分，只是让它生成了元素，但是仍然打印未定义。 我对这句话的不确定性完全感到困惑。

首先，它进行AJAX调用以获取所需的信息：

  if (window.XMLHttpRequest) { // Non-IE browsers
httpRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE 8 and older
httpRequest = 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 receipt
if (httpRequest.readyState == done && httpRequest.status == ok) {
  artistList = JSON.parse(httpRequest.responseText);

然后，它处理该信息并生成用inner.HTML实现的HTML。

var artistsAndImage = {};

for (var i=0; i < artistList["artists"]["artist"].length; i++) {
var name = artistList["artists"]["artist"][i]["name"];
artistsAndImage[name] = artistList["artists"]["artist"][i]["image"][0]["#text"];
};
var code;
// Generate HTML for sidebar with artist names and iamges
for (var name in artistsAndImage) {
nameid = name.
      replace(/ /g, "_").
      replace(/&/g, ":amp").
      replace(/\+/g, ":plus");
code += "<element id=\"" + nameid + "\" onclick=\"details(this)\">\n<p style = \"cursor:default\">\n <img src=\"" + artistsAndImage[name] + "\" alt=\"alt\" width = \"50\" height = \"50\">\n" + name + "\n</p> </element>\n";
};
 document.getElementById("sidebar").innerHTML = "<div style = \"padding:20px\">" + code + "</div>";

“未定义”来自何处，我该如何解决？ 您可以在此处看到该页面的当前版本： http ： //test.yukot.corp.he.net/

Answer 1

实例化您的var code; 用空字符串：

var code = '';

Answer 2

乍一看，我看到出现undefined三个可能原因，不是artistList["artists"]["artist"][i]["image"][0]["#text"]并不总是存在（这一行artistsAndImage[name] = artistList["artists"]["artist"][i]["image"][0]["#text"]; ）
之后，您定义一个变量code ，但是其值（自动）设置为undefined ，您无需将其初始化为字符串： var code = ''; 应该解决。
另一个解释是您遍历对象，而不检查您正在处理的属性是否在实例本身上定义：

var code = ''; //initialize code to empty string
for (var name in artistsAndImage)
{
    if (artistsAndImage.hasOwnProperty(name))
    {
        code += 'First string';
        //only process those that are instance properties
    }
}

绝对可以肯定，您也可以检查undefined ：

var code = '';
for (var name in artistsAndImage)
{
    if (artistsAndImage.hasOwnProperty(name) && artistsAndImage[name] !== undefined)
    {
        //only process those that are instance properties
    }
}

在控制台中尝试以下操作：

var code;//code is set to undefined
code += 'part of a string';
console.log(code);//logs: undefinedpart of a string