Node.js+Express+EJS渲染API数据无法显示问题求助

核心问题 #

控制台能打印数据但页面不渲染，说明后端已成功获取数据，但前端EJS模板使用了错误的数据结构进行循环。你直接用response.length，但API返回的response大概率是一个包含数组的对象（而非直接是数组），对象没有length属性，导致循环无法执行。

修复步骤 #

1. 确认API返回的数据结构 #

查看控制台打印的response，比如它可能是类似这样的结构：

{
  cards: [
    { name: "皮卡丘", ... },
    { name: "妙蛙种子", ... }
  ]
}

此时数组在response.cards中，而非response本身。

2. 调整后端代码（优化+传参更清晰） #

将回调式的fetch改为async/await写法，同时明确传递数组数据：

const fetch = require('node-fetch');
exports.allCarte = async (req, res) => {
  try {
    const apiRes = await fetch('https://pokeapi-enoki.netlify.app/');
    if (!apiRes.ok) {
      throw new Error(`HTTP error! Status: ${apiRes.status}`);
    }
    const data = await apiRes.json();
    console.log(data);
    // 根据实际结构传递数组，比如data.cards
    res.render("../views/home", {
      cards: data.cards // 把数组单独传给模板，避免混淆
    });
  } catch (err) {
    console.error('数据获取失败:', err);
    res.status(500).send('加载数据失败');
  }
}

3. 修复前端EJS模板 #

• 移除末尾多余的<字符
• 使用正确的数组变量进行循环，同时增加空数据判断：

<body>
  <main>
    <ul>
      <% if (cards && cards.length) { %>
        <% for(let i = 0; i < cards.length; i++) { %>
          <li><%= cards[i].name %></li>
        <% } %>
      <% } else { %>
        <li>暂无数据</li>
      <% } %>
    </ul>
    <h1>Hi, there!</h1>
  </main>
</body>

额外提示 #

• 模板中尽量使用let替代var，避免变量提升导致的潜在问题
• 增加错误捕获，避免后端崩溃或前端出现空白页面

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