Firebase返回值在EJS模板中无法正常渲染问题咨询

问题根因 #

for...in遍历对象时，变量bill获取到的是对象的键名（字符串类型的key），而非你预期的账单数据对象，因此访问bill.id、bill.Phone等属性会返回undefined，导致字段无法正常渲染。

解决方案 #

方案1：直接调整EJS模板取值逻辑 #

在遍历中通过键名从ChildData中取出对应的账单对象即可：

<% for(var billKey in ChildData){ %>
    <% const bill = ChildData[billKey] %>
    <tr>
       <td><%= bill.id %></td>
       <td><%= bill.Phone %></td>
       <td><%= bill.Amount %></td> 
       <td><%= bill.Purchase_Date %></td>
       <td>View Details</td>
    </tr>
<% } %>

方案2（更推荐）：服务端预处理数据为数组后再传给模板 #

Firebase的snapshot.val()默认返回键值对结构的对象，提前转成数组后模板遍历逻辑更清晰，也更符合列表渲染的常规写法：

1. 修改Node.js服务端代码：

app.get("/viewbill", function(req,res){
    database.once("value", function (snapshot) {
        // 键值对转纯数据数组，加默认空对象避免空数据报错
        const billList = Object.values(snapshot.val() || {})
        res.render('viewbills', {ChildData: billList});    
    });
})

2. 对应修改EJS模板，用forEach遍历数组：

<% ChildData.forEach(bill => { %>
    <tr>
       <td><%= bill.id %></td>
       <td><%= bill.Phone %></td>
       <td><%= bill.Amount %></td> 
       <td><%= bill.Purchase_Date %></td>
       <td>View Details</td>
    </tr>
<% }) %>

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