JavaScript forEach函数报错排查：API数据填充HTML遇TypeError

核心错误点 #

1. forEach遍历对象误用
   你写的emails.email.sender是完全错误的——emails是API返回的邮件数组，不存在email属性，forEach的回调参数email才是当前遍历到的单条邮件数据，应该直接用email.sender、email.subject、email.timestamp，这就是触发Cannot read properties of undefined错误的直接原因。

2. HTML结构不匹配需求
   当前HTML只有一组#email-sender类元素，forEach遍历所有邮件时，每一次循环都会覆盖这几个元素的内容，最终页面只会显示最后一封邮件的信息，无法实现多封邮件的展示。

3. 笔误问题
   代码最后一行把时间戳的内容设成了sender，属于明显笔误，应该替换为timestamp。

修正后的代码 #

inbox.js 修正版

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
    document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
    document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
});

function load_mailbox(mailbox) {
    fetch(`/emails/${mailbox}`)
    .then(response => response.json())
    .then(emails => {
        console.log(emails);
        // 清空邮件视图，避免切换邮箱时内容叠加
        const emailsView = document.querySelector("#emails-view");
        emailsView.innerHTML = '';
        
        // 遍历每一封邮件并动态生成DOM元素
        emails.forEach(email => {
            const emailFrame = document.createElement('div');
            emailFrame.className = 'frame';
            
            const senderDiv = document.createElement('div');
            senderDiv.textContent = `From: ${email.sender}`;
            
            const subjectDiv = document.createElement('div');
            subjectDiv.textContent = `Subject: ${email.subject}`;
            
            const timestampDiv = document.createElement('div');
            timestampDiv.textContent = `Time: ${email.timestamp}`;
            
            emailFrame.appendChild(senderDiv);
            emailFrame.appendChild(subjectDiv);
            emailFrame.appendChild(timestampDiv);
            emailsView.appendChild(emailFrame);
        });
    });
}

inbox.html 简化版

<div id="emails-view">
    <!-- 邮件内容将通过JS动态生成 -->
</div>

关于是否改用for循环 #

完全没必要，forEach本身没有问题，只是你误用了遍历对象。修正上述错误后，forEach可以正常工作。如果习惯用其他循环方式，比如for...of，逻辑是完全一致的：

for (const email of emails) {
    // 内部逻辑与forEach版本完全相同
}

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