我有一个简单的server.js应用程序。其中一条路由是/api/showaccounts。它的范围是从MongoDB获取帐户序列(用户名，余额和名称字段):

app.post('/api/showaccounts', async (req, res) => {
try {
const response = await Account.find({})
console.log(response)
res.json({ status: "ok" })

} catch (error) {
res.json("Error")
throw error
}
})

当我做console.log(response)时，我看到一个JSON数组:

[
{
username: 'bobo',
balance: 245,
name: 'bobo',
}
]

现在，到路径"./static/table.html":

<body>
<table>
<thead>
<tr>
<th>Username</th>
<th>Balance</th>
<th>Name</th>
</tr>
</thead>
<tbody id="data-output">
</tbody>
</table>

我只是想添加前一个数组的每个JSON元素作为这个表的行。最简单的方法是什么?

这里是一个简单的JavaScript示例:https://jsfiddle.net/m3dx0eua/您可以通过单击Run按钮来尝试。

注意

const response = [
{
username: 'bobo',
balance: 245,
name: 'bobo',
},
{
username: 'alice',
balance: 122,
name: 'alice',
},
{
username: 'bob',
balance: 25,
name: 'bob',
}
];

只是一个例子，实际上你想使用你的API中的响应对象。

工作原理

1。访问表

const table = document.getElementById("data-output")根据表的ID获取表。现在我们可以在JavaScript中操作这个HTML元素了。点击这里了解更多信息

2。遍历响应

response.forEach(dataset => appenDataSetToTable(table, dataset))从response获取每个一级对象(在我们的例子中是每个帐户的数据集)并调用前面定义的(这很重要!)appenDataSetToTable(table, dataset)与我们在步骤1中获得的table元素和当前数据集。点击这里了解更多信息

3。构建表行

不，我们在appendDataSetToTable函数中。我们有用户"bobo"的表和当前数据集。首先，我们需要为bobo创建一个新的表行。我们可以使用const tr = document.createElement('tr');

事实上，我们可以通过使用document.createElement(<HTML tag>)来动态创建任何HTML标签

4。赋值数据

现在，我们需要为单个数据点创建<td>s。我们使用与之前创建表行相同的方法:const tdUsername = document.createElement('td');

然后我们需要将数据分配给<td>。这是由tdUsername.innerText = dataset.username;完成的。InnerText是在开始和结束HTML标记之间的。在这种情况下，它翻译成<td>bobo</td>。点击这里了解更多信息

对余额和名称重复上述操作。事实上，我们可以用另一个函数来做这件事，从而省去了手工工作。

5。附加子

当我们把数据赋值给<td>后，我们必须把<td>赋值给<tr>。我们可以通过调用tr.appendChild(tdUsername);

我们对余额和名称重复上述操作，最后我们需要将整个<tr>附加到表中:table.appendChild(tr);

点击这里了解更多

6。前景

如果这看起来有点枯燥和繁琐，它是。幸运的是，有一些工具可以让你的生活变得更加容易，即使它们最初很难学习。对于初学者来说，一个不错的选择是https://vuejs.org/。如果你感兴趣，可以去看看。

如何将数据从Express呈现到HTML表?