Node.js使用EJS渲染数组对象到HTML表格时长度大于1报错问题

核心报错原因 #

• 数组初始化长度不足：你初始声明的spielzeitenArr仅包含1个元素，当循环次数大于1时，访问spielzeitenArr[i]（i≥1）得到的是undefined，尝试给undefined的spzeit、spielzeit_id属性赋值会直接抛出类型错误。
• 数据库返回值读取逻辑错误：你注释中的原写法spzeitData.spzeit有误，spzeitData是数据库查询返回的数组，应该读取对应下标的元素属性spzeitData[i].spzeit。

修正后的服务端代码 #

不需要预先固定数组长度，直接遍历查询结果往数组内新增对象即可：

//spielzeiten
var spielzeitenArr = [];
var spzeitData = await myDB.selectSpielzeit();

for (var i = 0; i < spzeitData.length; i++) {
    spielzeitenArr.push({
        spzeit: spzeitData[i].spzeit,
        spielzeit_id: spzeitData[i].spielzeit_id
    });
}

res.render('index', {
    firmen: firmanameArr,
    block: blocknameArr,
    datei: dateinameArr,
    jinglein: jingleinArr,
    jingleout: jingleoutArr,
    szdata: spielzeitenArr
});

EJS模板结构修正 #

原模板中<tr></tr>为空标签，单元格<td>放在了行标签之外，会导致表格结构错乱，修正后写法：

<table id="todoTable">
    <tr>
        <td class="tdList">Datum</td>
        <td class="tdList">Zeit</td>
        <td class="tdList">Start Jingle</td>
        <td class="tdList">End Jingle</td>
        <td class="tdList">Name</td>
        <td class="tdList">
            <div class="select-wrapper">
                <select id="categoryFilter" class="selectCompany"></select>
            </div>
        </td>
    </tr>
    <% szdata.forEach((item) => { %>
    <tr>
        <td><%= item.spzeit %></td>
        <td><%= item.spielzeit_id %></td>
        <!-- 剩余空白列按需补全内容即可 -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <% }); %>
</table>

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