Javascript 输出具有属性的对象数组
我正在尝试编写一个函数Javascript 输出具有属性的对象数组,javascript,Javascript,我正在尝试编写一个函数displayTable（总统），它接受总统对象数组。每个president对象都有属性名tookOffice和leftOffice 对于每位总统，我想在表中添加一行id为“总统”。将名称放在第一列，将tookOffice放在第二列，将leftOffice放在第三列 我在输出中不断得到未定义的 下面是我的尝试-首先是html <div id="output"> <table id="presidents"> <tr>
displayTable（总统）未定义的
下面是我的尝试-首先是html
<div id="output">
<table id="presidents">
<tr>
<th>President</th><th>Took office</th><th>Left office</th>
</tr>
</table>
</div>
总统就职
下面是javascript
function displayTable(presidents){
for(var i = 1; i < presidents.length; i++){
var row = document.getElementById("presidents").insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = presidents.name;
cell2.innerHTML = presidents.tookOffice;
cell3.innerHTML = presidents.leftOffice;
}
}
功能显示表（总统）{
对于（var i=1；i
我知道我离目标很近，但我想不出来您必须如此简单地访问阵列
presidents[i].name;
presidents[i].tookOffice;
presidents[i].leftOffice;
此外，我还建议您完全组装html片段，然后插入整个片段。每次插入的方式都会导致浏览器重新加载，这在处理表时会更加昂贵。按原样，如果一次插入所有片段，则有#行*#单元格*2+行渲染调用，而不是1个渲染调用
我知道我很接近，但我想不出来
实际上非常接近。看看你的代码。设置单元格的innerHTML时，引用的是整个数组，而不是特定的条目cell1.innerHTML=presidents[i]。名称是您想要的
查看任何现代浏览器中的开发人员工具，以帮助您更好地调试浏览器中发生的事情。它们都提供了优秀的javascript调试器和大量其他功能，可以帮助您进行web开发
HTML模板
现在，一个更好的方法是通过HTML模板来完成您想要做的事情。使用HTML模板，您可以构建一个通用的HTML模板，然后用javascript或AJAX调用生成的数据填充该模板。下面是一个使用名为Handlebar的模板引擎的示例。有很多优秀的模板引擎，车把就是其中之一
总统就职
{{{各位主席}
{{name}}
{{Tookofice}}
{{leftOffice}}
{{/每个}}
var source=$（“#总统表格模板”）.html（），
template=handlebar.compile（源代码）；
风险值数据={
“主席”：[
{
图科菲斯：1990年，
左办公室：1994年，
姓名：“齐吉”
},
{
tookOffice:1994年，
左办公室：1998年，
姓名：“道尔”
},
{
图科菲斯：1998年，
左办公室：2002年，
姓名：“爱德华多”
},
]
};
var html=模板（数据）；
$（“body”）.html（html）；
您没有在数组总统[i]中指定索引。命名总统[i]。Tookofice等。总统
应该是总统[i]
，因为它是一个对象数组。您的输入是什么（以及您如何定义总裁
），在这里会有所帮助。
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js">
<script id="presidents-table-template" type="text/x-handlebars-template">
<table id="presidents">
<tr>
<th>President</th><th>Took office</th><th>Left office</th>
</tr>
{{#each presidents}}
<tr>
<td>{{name}}</td>
<td>{{tookOffice}}</td>
<td>{{leftOffice}}</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script>
var source = $("#presidents-table-template").html(),
template = Handlebars.compile(source);
var data = {
"presidents" : [
{
tookOffice : 1990,
leftOffice : 1994,
name : "Ziggy"
},
{
tookOffice : 1994,
leftOffice : 1998,
name : "Doyle"
},
{
tookOffice : 1998,
leftOffice : 2002,
name : "Eduardo"
},
]
};
var html = template(data);
$("body").html(html);
</script>