在表格中打印出 Javascript 数组答案

【问题标题】：Print out Javascript array in table在表格中打印出 Javascript 数组
【发布时间】：2012-08-11 02:51:17
【问题描述】：

我有这个数组：

var employees = [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" }
];

我想将整个数组打印为 html 表格。我将如何做到这一点？

我试过了，但只能得到最终的打印名称：

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

var obj = eval ("(" + txt + ")");

for (i=0; i<txt.length; i++){
    document.getElementById("fname").innerHTML=obj.employees[i].firstName 
    document.getElementById("lname").innerHTML=obj.employees[i].lastName 
}
</script>
</body>
</html>

【问题讨论】：

您遍历数组并相应地创建 DOM 元素，或者您使用模板引擎...
为什么要直接在代码中创建一个 JSON 字符串，然后对其进行评估？如果你想要一张桌子，为什么要使用<span> 元素？
@Mike：如果您正在使用库，请下次指出。您的问题旨在对未来的读者有用。如果没有迹象表明问题中使用了 jQuery，则 jQuery 答案没有意义。这并不意味着只为您提供一次性本地化帮助。 StackOverflow 旨在创建对社区未来几年有用的帖子。

标签： javascript arrays html-table

【解决方案1】：

使用 jQuery 你可以做到：

var txt = '{"employees":[' +
    '{"firstName":"John","lastName":"Doe" },' +
    '{"firstName":"Anna","lastName":"Smith" },' +
    '{"firstName":"Peter","lastName":"Jones" }]}';

// $.parseJSON will parse the txt (JSON) and convert it to an
// JavaScript object. After its call, it gets the employees property
// and sets it to the employees variable
var employees = $.parseJSON( txt ).employees;

var $table = $( "<table></table>" );

for ( var i = 0; i < employees.length; i++ ) {
    var emp = employees[i];
    var $line = $( "<tr></tr>" );
    $line.append( $( "<td></td>" ).html( emp.firstName ) );
    $line.append( $( "<td></td>" ).html( emp.lastName ) );
    $table.append( $line );
}

$table.appendTo( document.body );

// if you want to insert this table in a div with id attribute 
// set as "myDiv", you can do this:
$table.appendTo( $( "#myDiv" ) );

jsFiddle：http://jsfiddle.net/davidbuzatto/aDX7E/

【讨论】：

如果您只想遍历 HTML 页面上已经存在的表格并将其写入底部怎么办。如何将表格数据附加到已经存在的 Web 文档中？

【解决方案2】：

var table = document.createElement("table");
for (var i = 0; i < employees.length; i++) {
  var row = table.insertRow(-1);
  var firstNameCell = row.insertCell(-1);
  firstNameCell.appendChild(document.createTextNode(employees[i].firstName));
  var lastNameCell = row.insertCell(-1);
  lastNameCell.appendChild(document.createTextNode(employees[i].lastName));
}
document.body.appendChild(table);

【讨论】：

请问您为什么在 table.insertRow() 中使用 (-1) ？为什么是 (-1) ？ insertCell 也一样

【解决方案3】：

针对数组类型数据结构中的对象的可重用 JSON 到表转换解决方案。对象属性插入标题单元格，值插入数据单元格。很抱歉我的非正统缩进，但它让我对函数式编程感到舒服。

var employees = [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" }
],
goods = [
{ "ID":"0001" , "Description":"Cool Table", "Price":"499" , "Color":"Green" }, 
{ "ID":"0002" , "Description":"Ceramic Vase", "Price":"120" , "Color":"Beige" }, 
{ "ID":"0003" , "Description":"Titanium Ashtray", "Price":"999" , "Color":"Titanium Color" },
{ "ID":"0004" , "Description":"Story Book", "Price":"1" , "Color":"Yellow" },
{ "ID":"0005" , "Description":"Chair", "Price":"120" , "Color":"Pink" }
],


tableMaker = o => {var keys = Object.keys(o[0]),
                   rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                   : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                       rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),rowMaker(keys,"th"));
                   return "<table>" + rows + "</table>";
                  };

document.write(tableMaker(employees));
document.write(tableMaker(goods));

【讨论】：