Html 如何在EJS中将select查询存储为div？

我已经创建了一个PostgreSQL数据库，在那里我存储了一个游戏的分数。我现在已经成功地在EJS文件中显示了它们。问题是，它非常丑陋，几乎不可能协调。我将需要数百行硬编码的可能性（不同长度的用户名，分数，布尔值等）。以下是输出的外观：

我为服务器提供了以下JS代码：

app.post('/users/leaderboard', async (req, res) => {
let username = {user: req.user.username}.user;
let leaderboard = req.body.lb;

//Used for hardcoding later
let headers= [];

// Local leaderboard
if (leaderboard == 'local') {
    pool.query(
        `select * from highscores
        where username = $1
        order by score desc`,
        [username],
        (err, results) => {
            if (err) {
                throw err;
            }

            // Header
            let header = "\xa0 \xa0 \xa0 \xa0 Score" +
                         "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 Date " +
                         "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 Straight flush?";
            headers.push({row: header});

            // Add query elements to list, to later display in page
            let localScores = [];
            for (let i = 0; i < results.rows.length; i++) {
                let tmpDate = JSON.stringify(results.rows[i].date).slice(1, 11);
                let tmpScore = results.rows[i].score;
                let tmpSF = results.rows[i].straightflush;

                let fin = "\xa0 \xa0" + tmpScore +
                            "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 " + tmpDate +
                            "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 " + tmpSF;
                localScores.push({row: fin});
            }
            res.render('leaderboard', {headers, localScores});
        }
    )
}

app.post（'/users/leadboard'，异步（req，res）=>{
让username={user:req.user.username}.user；
让排行榜=req.body.lb；
//用于以后的硬编码
让标题=[]；
//本地排行榜
如果（排行榜==“本地”）{
pool.query(
`从高分中选择*
其中username=$1
按分数顺序描述`，
[用户名]，
（错误，结果）=>{
如果（错误）{
犯错误；
}
//标题
let header=“\xa0\xa0\xa0\xa0分数”+
“\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0日期”+
“\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0直接齐平？”；
headers.push（{row:header}）；
//将查询元素添加到列表中，以便稍后在页面中显示
让localScores=[]；
for（设i=0；i

我想你可以，以某种方式，把每个用户名、分数、日期和bool放在一个div中，并将它们放在中间。这可以很容易地让代码变得更漂亮

这是相关的HTML/EJS代码：

<div class="center">
    <ul>
        <% if (typeof headers != 'undefined') { %>
            <% headers.forEach (func => { %>
                <li style="font-weight: bold;"> <%= func.row %> </li>
            <% }) %>
        <% } %>
    </ul>
</div>

<div class="center">
    <ul>
        <% if (typeof localScores != 'undefined') { %>
            <% localScores.forEach (func => { %>
                <li> <%= func.row %> </li>
            <% }) %>
        <% } %>
    </ul>
</div>

{ %>



{ %>

编辑：这是我更改为表时发生的情况： EJS:

{ %>
{ %>

结果是这样的：

Edit2：这是生成的HTML

---

为什么要创建第二个表，而不是将数据放在已创建的第一个表中

我猜您在JSON中以适当的方式构造了这些数据，因此它看起来类似于：

[{
   user,
   score,
   date,
   straight_flush
}]

因此，您的代码应该如下所示：

<div class="center">
<table>
    <tr>
        <% if (typeof headers != 'undefined') { %>
            <% headers.forEach (func => { %>
                <td style="font-weight: bold;"> <%= func.row %> </td>
            <% }) %>
        <% } %>
    </tr>
        <% headers.forEach (func => { %>
    <tr>
            <% if (typeof localScores != 'undefined') { %>
                <% localScores.forEach (func => { %>
                    <td> <%= func.row.user %></td> 
                    <td> <%= func.row.score %></td> 
                    <td> <%= func.row.date %></td> 
                    <td> <%= func.row.straight_flush%></td>
                <% }) %>
            <% } %>
     </tr>
        <% } %>
</table>
</div>

{ %>
{ %>
{ %>

---

每次转到数组中的下一个对象时，您都需要创建新行。在表的示例中，您创建了两行。一行用于标题，一行用于数据。我无法检查我的代码，但我认为它应该类似。请检查并让我知道这是否适用于您。

为什么不使用HTML表元素t？参见Edit@kyziurIt没有，我得到的代码与您在我的原始帖子底部看到的代码相同：/噢，我的错误，很抱歉。我只是复制了一个错误。应该是创建一个标题，以便标题位于第一行。然后应该是-为数组中的每个对象创建一行。我修复了我的答案。您能检查一下吗？没有区别，我是afraid。看起来整个过程都是作为一个td传递的。请检查生成了什么HTML。好的，我们可以在您添加的图像中看到。您正在一个td中显示每行的所有数据。为什么？因为。我认为您应该做4个td，因为您有4个属性，应该是。检查它并让我知道，所以我会更新答案。

<div class="center">
<table>
    <tr>
        <% if (typeof headers != 'undefined') { %>
            <% headers.forEach (func => { %>
                <td style="font-weight: bold;"> <%= func.row %> </td>
            <% }) %>
        <% } %>
    </tr>
        <% headers.forEach (func => { %>
    <tr>
            <% if (typeof localScores != 'undefined') { %>
                <% localScores.forEach (func => { %>
                    <td> <%= func.row.user %></td> 
                    <td> <%= func.row.score %></td> 
                    <td> <%= func.row.date %></td> 
                    <td> <%= func.row.straight_flush%></td>
                <% }) %>
            <% } %>
     </tr>
        <% } %>
</table>
</div>