javascript - Javascriptで生成されたHTMLも「未定義」を出力します

Question

last.fmAPIから取得したアーティスト名と画像を使用してメニューを作成しようとしています。現在、リストの一番上に「未定義」と表示されることを除いて、画像と名前のリストが正常に生成されます。要素にアーティスト名/画像を入力する部分をコメントアウトして、要素を生成させてみましたが、それでも未定義で印刷されます。私はそれが何を言っているのかが未定義であることに完全に困惑しています。

まず、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

一見すると、undefined表示される3つの考えられる原因がわかります。どちらかartistList["artists"]["artist"][i]["image"][0]["#text"]が常に存在するとは限りません（この行artistsAndImage[name] = artistList["artists"]["artist"][i]["image"][0]["#text"];）
その後、変数を定義しますcodeが、その値は（自動的に）に設定されundefined、初期化されません文字列に：var code = '';それを解決する必要があります。
もう1つの説明は、処理しているプロパティがインスタンス自体で定義されているかどうかを確認せずに、オブジェクトをループすることです。

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

Answer 2

var code;空の文字列でインスタンス化します:

var code = '';