Javascript JSON Data to HTML Table

Question

I have some code which I'll paste below now. What the code does is read the contents of an XML file and put it into a JSON. Then puts the data from the JSON into a HTML table. All works fine except one thing. When the table is created the first row (after the column headings) always shows up as "undefined" in each cell. I've had a look through this code and cannot find anything that would cause it but I'm not an expert and I'm sure a fresh pair of eyes would help so any ideas?

<html>
<head>
<h1><u>USA State Information</u></h1>
</head>
<body>
<p><b>Please select an area of the USA in the dropdown list below.</b></p>
<p><select name="area" onchange="findXML(this.value)">

<?php
//set directory and open it
$xmldir = 'XML';
$dir = opendir($xmldir);

//create array and read through files in directory
$xmlfiles = array();
while ($file = readdir($dir))
{
    //if the first char is not '.' then add to array
    if (substr($file,-1,1) !== ".")
    {
        $xmlfiles[] = $file;
    }
    else
    {
        //do nothing
    }
}

echo '<option value="select">Select</option>';

foreach($xmlfiles as $area){ 
    echo '<option value="'.$area.'">'.$area.'</option>'; 
}
echo '</select>';

//close directory
closedir($dir);
?>
</p>
<p>
<div id=tbl>
</div>
<table id="elems" border="1" cellspacing="1" cellpadding="5">
<tr>
<td><b>Name</></td>
<td><b>Number</></td>
<td><b>Joined</></td>
<td><b>Population</></td>
</tr>
</table>
<script>
function findXML($area) {
$area = "XML/" + $area;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",$area,true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
//find number of elements in the XML file
$length = xmlDoc.getElementsByTagName("name").length;

var JSONObject = [{}];
for (i=0; i!=$length; i++){
    //do something

    JSONObject.push(
    { "name":(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue),
    "number":(xmlDoc.getElementsByTagName("number")[i].childNodes[0].nodeValue), 
    "joined":(xmlDoc.getElementsByTagName("joined")[i].childNodes[0].nodeValue),
    "population":(xmlDoc.getElementsByTagName("population")[i].childNodes[0].nodeValue) }
    );
}

r=1;
i=0;
for (i=0; i!=($length); i++){

    var tblr = document.getElementById("elems").insertRow(r);
    var cell1= tblr.insertCell(0);
    var cell2= tblr.insertCell(1);
    var cell3= tblr.insertCell(2);
    var cell4= tblr.insertCell(3);
    cell1.innerHTML = JSONObject[i].name;
    cell2.innerHTML = JSONObject[i].number;
    cell3.innerHTML = JSONObject[i].joined;
    cell4.innerHTML = JSONObject[i].population;
    r++;
}

}
</script>
</p>

</table>
</body>
</html>

Just a stylistic concern. Why not tblr.insertCell(0).innerHTML = JSONObject[i].name;? There is no need for these variables. Also, your var statements inside of the for loop are logically wrong: they are variables that are either local to the containing function or global to the window! You cannot declare variables inside of a for loop. To understand more about the javascript code quality, you might start using a tool like jshint.com. — ErikE
– ErikE, Commented Jan 31, 2013 at 22:34

Elliot Bonneville · Accepted Answer · 2013-01-31 22:29:07Z

2

I think I found the issue:

var JSONObject = [{}];

should be

var JSONObject = [];

The reason this fixes the issue is that you're iterating through the JSONObject array starting at the first index. This is fine, but the way you initialized the array gives the first index an empty object. When you go to get the properties name, number, etc., the empty object won't have them and they'll be returned as undefined.

answered Jan 31, 2013 at 22:29

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

6TTW014 Over a year ago

Thank you SO much! Just tried this and it has solved the problem! Can't believe I didn't notice this before, haha! Thanks again!

ErikE Over a year ago

@Kimmy25 If this solved your answer please click the check mark to the left of the post underneath the up/down arrows.

6TTW014 Over a year ago

I've tried. I've got to wait a few more minutes but will do so when it's available :)

ErikE Over a year ago

@Kimmy25 Ah, my apologies! :)

andrew.butkus · Accepted Answer · 2013-01-31 22:27:44Z

0

have you tried:

for (i=1; i!=($length); i++){

It may be your index starts from 1 and not 0

answered Jan 31, 2013 at 22:27

andrew.butkus

7876 silver badges20 bronze badges

1 Comment

Elliot Bonneville Over a year ago

This will actually fix the issue but it's not the "correct" solution. Arrays are always 0 indexed.

Collectives™ on Stack Overflow

Javascript JSON Data to HTML Table

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related