Express JS中服务器端变量无法在Pug视图渲染的问题

1. 修正Pug变量引用语法 #

如果要在客户端JS中使用后端传递的数组，必须用不转义插值将数组转为合法的JSON字符串：

script.
  const clientArr = !{JSON.stringify(backendArray)};

• 避免用#{}：它会转义HTML特殊字符，导致JS解析数组时出现语法错误；!{}会输出原始JSON，确保客户端能正确识别为数组。
• 若只是在HTML中渲染数组文本，直接用#{backendArray}即可。

2. 核对后端变量传递细节 #

• 确认res.render的第二个参数中变量名拼写完全一致，比如后端传res.render('index', { todoList: arr })，Pug中不能写成#{todolist}。
• 确保变量赋值完成后再调用res.render：如果是异步操作（比如数据库查询），必须在回调/then块内执行渲染，避免提前调用导致变量未赋值。

3. 验证视图引擎配置 #

检查app.js中是否正确配置Pug相关参数：

const path = require('path');
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views')); // 确保指向项目真实的视图目录

若views路径错误，会渲染默认空模板，导致传递的变量无法显示。

4. 排查模板内的逻辑判断 #

检查Pug中是否存在条件渲染逻辑错误，比如误写为if !backendArray（仅数组为空时显示），而实际数组有值，导致内容被隐藏。可以临时去掉条件判断，直接渲染变量测试。

5. 确认变量未被后续代码覆盖 #

避免在res.render之后修改传递的变量，比如：

// 错误示例：后续代码清空了变量
let backendArray = [1,2,3];
res.render('index', { backendArray });
backendArray = [];

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