使用Express与EJS渲染API数据时，如何仅显示一次无有效案例提示？

API 探路者

2026-8-3

解决EJS中重复显示无数据提示的问题

核心思路是先整体筛选有效数据，再判断是否渲染列表或提示，而非在循环单个项时判断输出提示。

方法一：Express路由提前过滤数据

在后端先筛选出有效数据（status不为"CLOSED"的项），再传给EJS模板，模板逻辑更简洁：

// Express路由代码
app.get('/cases', (req, res) => {
  // 模拟从API获取的原始数据
  const rawCases = [
    { id: 1, status: 'OPEN', title: '待处理案例' },
    { id: 2, status: 'CLOSED', title: '已关闭案例' },
    { id: 3, status: 'PENDING', title: '待审核案例' }
  ];

  // 过滤出非CLOSED的有效案例
  const validCases = rawCases.filter(item => item.status !== 'CLOSED');

  // 将过滤后的数据传给模板
  res.render('cases', { validCases });
});

对应的EJS模板代码：

<!-- cases.ejs -->
<% if (validCases.length > 0) { %>
  <div class="case-container">
    <% validCases.forEach(caseItem => { %>
      <div class="case-card">
        <h4><%= caseItem.title %></h4>
        <p>状态: <%= caseItem.status %></p>
      </div>
    <% }) %>
  </div>
<% } else { %>
  <!-- 仅在无有效数据时显示一次提示 -->
  <p class="empty-tip">未找到/无有效案例</p>
<% } %>

方法二：直接在EJS模板内过滤数据

如果不想在后端处理，也可直接在EJS中完成筛选和判断：

<!-- cases.ejs -->
<% 
  // 在模板内过滤有效数据
  const validCases = cases.filter(item => item.status !== 'CLOSED');
%>

<% if (validCases.length > 0) { %>
  <!-- 渲染有效案例列表 -->
  <% validCases.forEach(caseItem => { %>
    <div class="case-item">
      <!-- 案例内容 -->
    </div>
  <% }) %>
<% } else { %>
  <p>未找到/无有效案例</p>
<% } %>