如何将Express后端循环获取的Stripe客户metadata传递到EJS前端正常渲染

修复方案 #

错误原因 #

• Stripe 客户列表接口返回的是分页集合对象，有效客户数组存放在返回值的data属性中，你直接将整个集合对象传递给前端，模板中读取customer.length会得到undefined，循环逻辑根本不会执行。
• JavaScript 为大小写敏感语言，Stripe 返回的元数据字段是小写metadata，你代码中使用全大写METADATA、NAME无法匹配到对应属性。

后端代码修复 #

app.get('/dashboard', async(req, res) => {
  const customersRes = await stripe.customers.list();
  // 直接提取有效客户数组传递给模板
  const customers = customersRes.data;
  // 可在此处测试单客户metadata是否正常读取
  customers.forEach(customer => {
    console.log(customer.metadata, customer.metadata.name, customer.metadata.email);
  });
  res.render('dashboard.ejs', {customers: customers})
})

前端EJS模板修复 #

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>NAME</th>
        <th>EMAIL</th>
        <th>ACTIONS</th>
      </tr>
    </thead>
    <tbody>
      <% if(customers.length){ 
        for(var i = 0;i < customers.length;i++) { %>
      <tr>
      <td><%=customers[i].metadata.name%></td>
      <td><%=customers[i].metadata.email%></td>
      <td><!-- 补充你的操作按钮逻辑 --></td>
      </tr>
         <% }
        } %>
    </tbody>
  </table>

若你确认metadata内存储的键本身是全大写的NAME、EMAIL，把上述代码里的小写name、email替换为大写即可。

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