Nodejs/Express服务端如何将对象数组返回前端渲染为HTML表格？

方案1：使用EJS模板引擎（推荐） #

• 第一步：安装EJS并配置Express
  首先执行安装命令：npm install ejs
  然后在main.js中添加模板引擎配置：

const express = require('express');
const app = express();
// 新增这两行配置
app.set('view engine', 'ejs');
app.set('views', './views'); // 视图文件放在项目根目录的views文件夹下

• 第二步：修改模板文件
  在项目根目录新建views文件夹，将原来的table.html重命名为table.ejs放入该文件夹，修改内容如下：

<html>
  <body>
    <h2>table</h2>
    <div id="show_table">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>ID</th>
          </tr>
        </thead>
        <tbody>
          <!-- EJS循环遍历result变量生成行 -->
          <% result.forEach(item => { %>
          <tr>
            <td><%= item.name %></td>
            <td><%= item.id %></td>
          </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </body>
</html>

• 第三步：修改POST路由
  将原来的res.send改为res.render，传入result变量：

app.post('/dataTable',(req,res) => {
  const result=[{name:'james', id:23},{name:'joe',id:35}];
  // 渲染table.ejs模板，传入result参数
  res.render('table', { result: result });
})

方案2：不用模板引擎，直接注入变量到静态HTML #

如果不想引入模板引擎，可以通过变量替换的方式把result注入到返回的HTML中：

• 第一步：修改table.html，添加变量占位符

<html>
  <body>
    <h2>table</h2>
    <div id="show_table"></div>
    <!-- 插入占位符，后续会被替换为实际的result数据 -->
    <script>window.result = {{RESULT_JSON}}</script>
    <script src="table.js"></script>
  </body>
</html>

• 第二步：修改table.js，修复拼写错误并使用注入的result

// 修复拼写错误：querySelector首字母大写，id名是show_table不是show_tabel
const tableDiv = document.querySelector('#show_table');
result.forEach((obj) => {
  // 这里自行实现表格拼接逻辑
  tableDiv.innerHTML += `姓名：${obj.name}，ID：${obj.id}<br>`;
});

• 第三步：修改POST路由，读取HTML并替换变量

const fs = require('fs');
const path = require('path');

app.post('/dataTable',(req,res) => {
  const result=[{name:'james', id:23},{name:'joe',id:35}];
  // 读取table.html文件内容
  const htmlPath = path.join(__dirname, 'table.html');
  let htmlContent = fs.readFileSync(htmlPath, 'utf-8');
  // 替换占位符为序列化后的result
  htmlContent = htmlContent.replace('{{RESULT_JSON}}', JSON.stringify(result));
  // 返回替换后的HTML
  res.send(htmlContent);
})

原有代码错误说明 #

• 原路由中res.send('table.html)写法错误，直接传字符串只会返回字符串本身，不会返回对应文件的内容，返回静态文件需要用res.sendFile，但静态文件无法直接传入动态变量。
• 原table.js中document.queryselector拼写错误，正确写法是document.querySelector，DOM选择器的id#show_tabel拼写错误，和HTML中的id不一致。

内容的提问来源于stack exchange，提问作者bit555