Javascript JSON 数据到 HTML 表答案

【问题标题】：Javascript JSON Data to HTML TableJavascript JSON 数据到 HTML 表
【发布时间】：2015-10-27 22:27:32
【问题描述】：

我现在将一些代码粘贴在下面。代码所做的是读取 XML 文件的内容并将其放入 JSON。然后将 JSON 中的数据放入 HTML 表中。除了一件事，一切都很好。创建表时，第一行（列标题之后）在每个单元格中始终显示为“未定义”。我浏览了这段代码，找不到任何会导致它的东西，但我不是专家，我相信一双新的眼睛会有所帮助，所以有什么想法吗？

<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>

【问题讨论】：

只是文体问题。为什么不tblr.insertCell(0).innerHTML = JSONObject[i].name;？不需要这些变量。此外，for 循环内的 var 语句在逻辑上是错误的：它们是包含函数的本地变量或窗口的全局变量！您不能在for 循环内声明变量。要了解有关 javascript 代码质量的更多信息，您可以开始使用像 jshint.com 这样的工具。

标签： javascript json xml html-table

【解决方案1】：

我想我找到了问题：

var JSONObject = [{}];

应该是

var JSONObject = [];

解决此问题的原因是您从第一个索引开始遍历 JSONObject 数组。这很好，但是您初始化数组的方式为第一个索引提供了一个空对象。当你去获取name、number等属性时，空对象不会有它们，它们会以未定义的形式返回。

【讨论】：

非常感谢！刚刚试过这个，它已经解决了这个问题！不敢相信我以前没有注意到这一点，哈哈！再次感谢！
@Kimmy25 如果这解决了您的问题，请单击帖子左侧上/下箭头下方的复选标记。
我试过了。我还得再等几分钟，但有空时会这样做:)
@Kimmy25 啊，对不起！ :)

【解决方案2】：

你试过了吗：

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

可能是您的索引从 1 开始，而不是 0

【讨论】：

这实际上可以解决问题，但它不是“正确”的解决方案。数组总是 0 索引。