CODEWITHSUNDEEP
javascriptjsonxmlhtml-table
6TTW014
6TTW014

Reputation: 627

Javascript JSON Data to HTML Table

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>

Upvotes: 0

Views: 593

Answers (2)

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

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.

Upvotes: 2

andrew.butkus
andrew.butkus

Reputation: 777

have you tried:

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

It may be your index starts from 1 and not 0

Upvotes: 0

Related Questions