如何从Node.js中间件传递JSON对象至EJS模板渲染表格

问题分析 #

你的Express后端传递数据的逻辑是正确的，但前端EJS脚本存在几个小错误导致数据无法正常渲染：

• 变量名大小写不匹配：定义了dataset但使用时写成了dataSet
• 多余的闭合括号});，缺少对应的DOM就绪事件包裹
• JSON解析写法可以简化

修正后的代码 #

后端app.js（无需修改，确认数据结构符合要求即可）

app.post('/process', upload.single('file'), (req, res) => {
  axios.post('http://127.0.0.1:5000/receive', jsonData)
    .then(response => {
      const jsonData_response = response.data;
      res.render("table", { jsonData_res: jsonData_response });
    })
    .catch(error => {
      console.error('Error sending data:', error);
    });
});

前端table.ejs（修正版本）

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">

<script>
// 等待DOM加载完成后初始化表格
$(document).ready(function() {
  // 直接将EJS变量转为JS对象，无需额外JSON.parse
  const dataSet = <%- JSON.stringify(jsonData_res) %>;
  
  $('#example').DataTable({
    data: dataSet,
    columns: [
      { title: '姓名' },
      { title: '职位' },
      { title: '办公地点' },
      { title: '分机号' },
      { title: '入职日期' },
      { title: '薪资' },
    ]
  });
});
</script>

<div>
  <table id="example" class="display"></table>
</div>

关键注意点 #

1. 变量名统一：确保JS中定义的变量和使用时的名称完全一致（比如统一用dataSet）
2. DOM就绪事件：用$(document).ready()包裹DataTables初始化代码，避免DOM未加载完成就执行脚本
3. 简化数据传递：<%- JSON.stringify(jsonData_res) %>会直接将EJS变量转为合法的JS对象，不需要再用JSON.parse包裹
4. 数据结构匹配：确保后端传递的jsonData_response是二维数组格式（例如[["张三", "工程师", "北京", "1234", "2023-01-01", "10000"], ...]），这是DataTables要求的data参数格式

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