Why this 'undefined'

Question

I have an array in PHP called $jsonRankings. It's an indexed array, each element contains some utf8 encoded HTML.

I load this array into another array that has some other data in it:

$sumArray['rankings'] = $jsonRankings;

I have done a print_r of this array and verified it contains only the data I need, index starting at 0.

My PHP file's output is this:

echo json_encode($sumArray);

Here's my javascript:

function getScores(){

var xmlhttp;
var jsonText;
var rowData;
var rowText;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();

}
else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() 
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {
        jsonText = xmlhttp.responseText;
        var parsedJSON = $.parseJSON(jsonText);

        rowData = parsedJSON.rankings;
        for(var index in rowData)
        {
            rowText += rowData[index];
        }
        document.getElementById('rows').innerHTML = rowText;
        document.getElementById('sessionName').innerHTML = parsedJSON.sessionName;
        document.getElementById('elapsedTime').innerHTML = "Elapsed Time: " + parsedJSON.elapsedTime;
        document.getElementById('remainingTime').innerHTML = "Remaining Time: " + parsedJSON.remainingTime;
        document.getElementById('lapsCompleted').innerHTML = "Laps Completed: " + parsedJSON.lapsCompleted;
        document.getElementById('flag').innerHTML = "Flag: " + parsedJSON.flag;
        document.getElementById('tickerMessage').innerHTML = parsedJSON.tickerMessage;
     }
}
xmlhttp.open("GET", "scoreboard.php?json=1", true);
xmlhttp.send();


    setTimeout(getScores, 1000);
}

getScores();

Basically this script runs once every second and updates a bunch of values on the page, including changing the content of a (table body) tag, inserting whatever rows need to be there.

This all works perfectly except my table body always has "undefined" as the first line. I really don't get why.

You shouldn't abuse `innerHTML` like that. Use `textContent` instead — Sterling Archer, Apr 14 '14 at 17:50
What does the JSON *actually* look like? You should be able to check it from your browser's network debug console. — Pointy, Apr 14 '14 at 17:51
How are you using `$.parseJSON`? Do you have `jQuery` on the page? If so, why on earth wouldn't you use jQuery to make the AJAX requests? — Alex W, Apr 14 '14 at 17:52
I realize it is ***easy*** to copy and paste scripts from the web. But please look them over. There is no reason to support IE5/6 is there? You just copied the xhr code from a tutorial from 2008? — rlemon, Apr 14 '14 at 17:54

score 3 · Answer 1 · answered Apr 14 '14 at 17:53

3

Break it down to the problem:

var rowText;         //undefined
rowText += "Hello";  //undefined + "Hello";
console.log(rowText);   //"undefined Hello"

If you set it to an empty string, the undefined issue will go away

var rowText = "";

answered Apr 14 '14 at 17:53

epascarello

204,599
20
195
236

score 1 · Answer 2 · edited May 23 '17 at 10:25

My guess is that rowText is undefined.

var rowText; // The variable exist but it's value is undefined until a proper value is given to it.

for(var index in rowData)
{
    rowText += rowData[index];
}
document.getElementById('rows').innerHTML = rowText;

If rowData is empty (you should dump the value of it to make sure) then rowText will be undefined.

It would make more sense to give it an initial value of the empty string, that should give you the empty string instead of undefined.

Also, take a look at why you shouldn't use innerHTML.

juvian · Answer 3 · 2014-04-14T17:56:05.703

0

You might have a function on rowData, so try to check with HasOwnProperty whether rowData has the property before adding to text:

    for(var index in rowData)
    {
        if(rowData.hasOwnProperty(index)){
            rowText += rowData[index];
        }
    }

edited Apr 14 '14 at 17:56

answered Apr 14 '14 at 17:50

juvian

15,875
2
37
38

-1 for no explanation (`try this` does not explain what you did) – Sterling Archer Apr 14 '14 at 17:51

Why this 'undefined'

3 Answers3