TypeError：从 API 调用渲染日期时的 data.forEach

Question

我收到错误：

类型错误：data.forEach 不是函数

我尝试过

data = JSON.parse(data)

但后来我收到另一个错误：

语法错误：“[object Object]”不是有效的 JSON

我想这是因为数据记录包含在一个带有键

content

的数组中，如下所示。有没有一种简单的方法来获取数组中的数据记录

content

？

document.addEventListener('DOMContentLoaded', initClubApi);

function initClubApi(){
    renderFromApi("games/team/2").then(function(data){               
        renderTeams(data);
    });
}

function renderFromApi(url){
    return fetch(`https://www.xyz.be/api/clubapi/${url}`).then(function(response){        
        return response.json();
    });
}

function renderTeams(data){
    const target = document.querySelector("#teams-schedule");
    target.innerHTML = "";
    console.log(data);
    data.forEach(function(row){
        
        const teamData = `
            <div class="date">${row.id}</div>
            <div class="wrapper">
                <div class="team-name">${row.homeTeamId}</div>
                <div class="versus">VS</div>
                <div class="team-name">${row.awayTeamId}</div>
            </div>
        `;
        target.innerHTML += teamData;
    });
}

以下数据示例（仅一行）

{
    "content":[
        {
            "viewGameReport":false,
            "id":1632,
            "date":"2023-08-17 19:30",
            "time":"1970-01-01 01:00",
            "cancelled":false,
            "status":0,
            "goalsHomeTeam":2,
            "goalsAwayTeam":2,
            "homeClub":{
                "id":1690,
                "name":"Sporting Keiem",
                "abbreviation":"Sporting Keiem",
                "logo":"https://dfaozfi7c7f3s.cloudfront.net/logos/extra_groot/1690.png?v=1",
                "logoSmall":"https://dfaozfi7c7f3s.cloudfront.net/logos/klein/1690.png?v=1",
                "version":1
            },
            "awayClub":{
                "id":159,
                "name":"K s v Veurne",
                "abbreviation":"K s v Veurne",
                "logo":"https://dfaozfi7c7f3s.cloudfront.net/logos/extra_groot/159.png?v=1",
                "logoSmall":"https://dfaozfi7c7f3s.cloudfront.net/logos/klein/159.png?v=1",
                "version":1
            },
            "competitionType":"Vriendschappelijk",
            "homeTeamId":null,
            "awayTeamId":2
        }
    ]
}

完整的 JSON 结果：

{
    "content":[],
    "pageable":{},
    "last":true,
    "totalElements":40,
    "totalPages":1,
    "first":true,
    "numberOfElements":40,
    "number":0,
    "size":2000,
    "sort":{},
    "empty":false
}

Answer 1

语法错误：“[object Object]”不是有效的 JSON

当您尝试解析 JSON 对象时，您会收到此错误。

JSON.parse()

仅用于将 JSON 字符串解析为 JSON 对象。

类型错误：data.forEach 不是函数

当您尝试迭代对象时出现上述错误（根据您提到的日志输出），

Array.forEach()

用于迭代数组而不是对象。

试试这个：

data.content.forEach(row => {
  ...
})