无法找到未定义的原因

Question

Every time my ajax code prints data, in first col it writes undefined. I can't find any solution for this. Here is how it prints:

    <tbody id="impDisplay">
    undefined
    <tr>
       <td>1498</td>
       <td>Wordpress įdiegimas</td>
       <td><input name="impTaskCh" id="1498" type="checkbox"></td>
   </tr>
   </tbody>

And here is my script which prints everything:

function stateChanged(){
    if(httpxml.readyState==4){
        var data = JSON.parse(httpxml.responseText);  // Received the data 
        var str;
        for(var key in data.data){    
            str = str + "<tr><td>"+ key + "</td>"
            str = str + "<td>"+ data.data[key] + "</td>"
            str = str + "<td><input type='checkbox' name='impTaskCh' id='"+ key +"'></td></tr>"
        }
        //str = str + "</tr>";
        document.getElementById("impDisplay").innerHTML=str;
      }
}

Help please duno how to fix this?

Answer 1

You define str as undefined, so when you append to it you're appending onto undefined. Set str to an initial empty string:

var str; // Here, you've set str to undefined
str = str + // Now you're appending onto 'undefined'
// Appending onto 'undefined' will call toString() on it, converting it
// to a string and resulting in this...
str = "undefined<tr><td>...."

Change to:

var str = "";