调用API渲染数据时遇TypeError: data.forEach问题，求解决方案

错误原因分析 #

• 第一个错误TypeError: data.forEach is not a function：你拿到的data是JS对象而非数组，forEach是数组专属方法，自然无法调用。从你提供的JSON返回结果能明确看到，实际需要的数组数据嵌套在content字段中。
• 第二个错误SyntaxError: "[object Object]" is not valid JSON：response.json()已经自动将接口返回的JSON字符串解析成了JS对象，此时再执行JSON.parse(data)，会先把JS对象转为字符串"[object Object]"，这显然不是合法JSON格式，因此报错。

简便解决方案 #

直接访问对象中的content数组即可，两种常用实现方式：

方式1：调用时直接传入content数组 #

修改initClubApi函数，将data.content传给renderTeams：

function initClubApi(){
    renderFromApi("games/team/2").then(function(data){
        renderTeams(data.content); // 传入嵌套的content数组
    });
}

方式2：在renderTeams内部处理数据 #

如果不想改动调用逻辑，可以在renderTeams中直接提取content数组，同时添加容错处理：

function renderTeams(data){
    const target = document.querySelector("#teams-schedule");
    target.innerHTML = "";
    // 取出content数组，若content不存在则默认空数组，避免报错
    const rows = data.content || [];
    rows.forEach(function(row){
        
        const teamData = `
            <div class="date">${row.id}</div>
            <div class="wrapper">
                <div class="team-name">${row.homeTeamId || row.homeClub.name}</div>
                <div class="versus">VS</div>
                <div class="team-name">${row.awayTeamId || row.awayClub.name}</div>
            </div>
        `;
        target.innerHTML += teamData;
    });
}

额外提示：你模板中使用的row.homeTeamId可能为null，可以替换为row.homeClub.name显示球队名称，优化页面展示效果。

关键注意事项 #

• 不要对response.json()返回的结果再次调用JSON.parse()，因为它已经是解析完成的JS对象/数组。
• 建议添加容错逻辑（如data.content || []），避免接口返回格式异常时触发新错误。

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