Express Node.js应用中EJS循环无法输出数据且无报错

1. 先确认persons数据是否正确传递到模板 #

在EJS模板里添加调试代码，直接在命令行查看数据状态：

<% console.log(persons) %> <!-- 启动服务后，命令行会打印该变量内容 -->
<div class="Contacts">
  <% for(let person in persons) { %>
    <h2><%= persons[person]['fname'] %></h2>
  <% } %>
</div>

• 如果命令行输出undefined，说明路由里的渲染代码没有正确传递persons数据，检查后端逻辑：

// 示例路由代码，确保查询结果正确传入模板
app.get('/contacts', (req, res) => {
  db.query('SELECT fname FROM users', (err, results) => {
    if (err) throw err;
    // 确认results是有效数组，再传递给模板
    res.render('contacts', { persons: results });
  });
});

2. 换用更适配数组的循环方式 #

SQL查询返回的用户数据通常是数组类型，for...in循环是遍历对象键的，用来遍历数组容易出问题，推荐两种更可靠的写法：

方法一：for...of循环 #

<div class="Contacts">
  <% for(let person of persons) { %>
    <h2><%= person.fname %></h2>
  <% } %>
</div>

方法二：forEach遍历 #

<div class="Contacts">
  <% persons.forEach(person => { %>
    <h2><%= person.fname %></h2>
  <% }) %>
</div>

3. 检查数据是否为空或字段名错误 #

• 如果SQL查询返回空数组，循环自然不会输出内容，可在模板里加空数据提示：

<div class="Contacts">
  <% if (persons.length === 0) { %>
    <p>暂无用户数据</p>
  <% } else { %>
    <% persons.forEach(person => { %>
      <h2><%= person.fname %></h2>
    <% }) %>
  <% } %>
</div>

• 确认字段名是否和SQL查询一致：比如查询的是first_name，模板里却写fname，会导致输出空值，可打印单个数据对象验证：

<% if (persons.length > 0) console.log(persons[0]) %>

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