Javascript 如何使用更智能的代码将postgresql表数据呈现为HTML？

我正在学习一个训练营，并且正在运行一个建立汽车租赁网站的项目

我需要使用postgresql（使用knex）、javascript、node.js和bootstrap的技巧

为了在UI中显示信息以供用户确认汽车预订，我准备了以下代码：

async function getBookings() {
const res = await fetch('/reg/user');
const resJson = await res.json();


let html = "";
for (let booking of resJson) {
  console.log(booking);

  html += `<tr>
  <td>${booking.id}</td>
  <td>${booking.username}</td>
  <td>${booking.email}</td>
  <td>${booking.phone}</td>
  </tr>`;
  }

  document.querySelector("#booking-table").innerHTML = html;

}

getBookings();

异步函数getBookings（）{ const res=等待获取（'/reg/user'）； const resJson=wait res.json（）； 设html=“”； 对于（让我们预订resJson）{ 控制台日志（预订）； html+=` ${booking.id} ${booking.username} ${booking.email} ${booking.phone} `; } document.querySelector（“#预订表”）.innerHTML=html； } 获取预订（）； 代码可以工作，但似乎有两个缺点：

这是相当老派的做法——使用td tr而不是div

它限制了调整表格比例的可能性-只能显示四个命名项目（id、用户名、电子邮件、电话）。如果将来需要更多或更少的项目，我需要重新硬编码项目名称

有没有更智能的方法将数据库信息呈现为HTML

非常感谢

您可以与

map

一起使用来简化代码

为了显示代码段正在工作，我删除了fetch

const sampleBookings=[{
id:1，
用户名：“鲍勃”，
电子邮件：“bob@email.com",
电话：1234567
},{
id:1，
用户名：“jane”，
电子邮件：“jane@email.com",
电话：7654321
}
];
常量dummyLoader=（）=>{
返回新承诺（（解决、拒绝）=>{
解决（样本预订）；
});
};
异步函数getBookings（）{
//显然是在现场版本。
dummyLoader（）。然后（预订=>{
文件查询选择器（“预订表”）
.innerHTML=bookings.map（{id，用户名，电子邮件，电话}）=>`
${id}
${username}
${email}
${phone}
`)
.加入（“”）；
});
}
获取预订（）
考虑使用模板引擎。