0

我正在尝试使用从 last.fm API 中提取的艺术家姓名和图像制作一个菜单。目前，它可以很好地生成图像和名称列表，除了它在列表顶部打印“未定义”。我已经尝试注释掉使用艺术家姓名/图像填充元素的部分，并让它生成元素，但它仍然打印未定义。我对它所说的未定义完全感到困惑。

首先，它进行 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/

4

2 回答 2

0

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

var code = '';
于 2012-10-08T08:37:01.637 回答
0

乍一看，我可以看到出现的三个可能原因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
于 2012-10-08T08:44:06.513 回答