如何使用JavaScript的fetch方法获取数据并显示在HTML表格中

你代码里存在4个核心问题，修改后即可正常渲染表格：

• HTML语法错误：内不能直接嵌套
  ，且代码末尾多了冗余的
  闭合标签
• 联赛信息赋值错误：你直接把leagueName、leagueLogo这两个DOM变量重写成了普通字符串/链接，没有给DOM设置对应属性
• 动态生成的内容不是表格结构：你目前用div生成赛事卡片，自然没法放到表格里展示
• 没有预留表格内容的渲染容器：现有表格只有表头行，后续赛事都渲染到了表格外的div中

修正后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Scorejedi</title>   
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <h1>ScoreBoard</h1>
        <table border="1">
            <!-- 表头行 -->
            <thead>
                <tr>
                    <th>联赛</th>
                    <th>主队</th>
                    <th>比分</th>
                    <th>客队</th>
                </tr>
            </thead>
            <!-- 赛事展示区 -->
            <tbody>
                <tr>
                    <td>
                        <div class="league">
                            <img id="leagueLogo">
                            <p id="leagueName">League Name</p>
                        </div>
                    </td>
                    <td>                
                        <div class="team">
                            <img  id="homeLogo" >
                            <p id="homeName">Team name</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <p id="goals"></p>
                        </div>
                    </td>
                    <td>
                        <div class="team">
                            <img id="awayLogo">
                            <p id="awayName">Team name</p>
                        </div>
                    </td>
                </tr>
                <!-- 动态渲染更多赛事的容器 -->
                <div id="matchTable" class="matches-table"></div>
            </tbody>
        </table>
    </div>
    <script src="main.js"></script>
</body>
</html>

修正后的JavaScript代码 #

//获取DOM元素
var elapsedTime = document.querySelector("#elapsed");
var homeTeamImage = document.querySelector("#homeLogo");
var homeTeamName = document.querySelector("#homeName");
var awayTeamImage = document.querySelector("#awayLogo");
var awayTeamName = document.querySelector("#awayName");
var lastMatchGoal = document.querySelector("#goals");
var leagueName= document.querySelector("#leagueName");
var leagueCountry= document.querySelector("#leagueCountry");
var leagueLogo= document.querySelector("#leagueLogo");
var matchTable = document.querySelector("#matchTable");

//动态生成赛事表格行的函数
function addMatchTile(data){
    //创建表格行
    var matchRow = document.createElement('tr');
    matchRow.classList.add("match-tile");

    //联赛信息单元格
    var leagueInfo = document.createElement('td');
    leagueInfo.classList.add("league");
    var officialLeagueName = document.createElement('p');
    officialLeagueName.innerHTML = data['league']['name'];
    var officialLeagueLogo = document.createElement('img');
    officialLeagueLogo.src =data['league']['logo'];
    leagueInfo.appendChild(officialLeagueLogo);
    leagueInfo.appendChild(officialLeagueName);

    //主队信息单元格
    var homeTeam = document.createElement('td');
    homeTeam.classList.add("team");
    var homeTileTeamName = document.createElement('p');
    homeTileTeamName.innerHTML = data['teams']['home']['name'];
    var homeTileTeamLogo = document.createElement('img');
    homeTileTeamLogo.src=data['teams']['home']['logo'];
    homeTeam.appendChild(homeTileTeamLogo);
    homeTeam.appendChild(homeTileTeamName);

    //比分单元格
    var scoreTd = document.createElement('td');
    var score = document.createElement('p');
    score.innerHTML = data['goals']['home'] + " - " + data['goals']['away'];
    scoreTd.appendChild(score);

    //客队信息单元格
    var awayTeam = document.createElement('td');
    awayTeam.classList.add("team");
    var awayTileTeamName = document.createElement('p');
    awayTileTeamName.innerHTML = data['teams']['away']['name'];
    var awayTileTeamLogo = document.createElement('img');
    awayTileTeamLogo.src=data['teams']['away']['logo'];
    awayTeam.appendChild(awayTileTeamLogo);
    awayTeam.appendChild(awayTileTeamName);

    //将所有单元格添加到行中，再插入表格
    matchRow.appendChild(leagueInfo);
    matchRow.appendChild(homeTeam);
    matchRow.appendChild(scoreTd);
    matchRow.appendChild(awayTeam);

    matchTable.appendChild(matchRow);
}
//请求数据
fetch("https://v3.football.api-sports.io/fixtures?date=2021-09-03", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "v3.football.api-sports.io",
        "x-rapidapi-key": "7c8b6208c94aaaaf7861641703244162"
    }
})
.then(response => response.json().then(data => {
    var matchesList = data['response'];
    var fixture = matchesList[0]['fixture'];
    var goals = matchesList[0]['goals'];
    var teams = matchesList[0]['teams'];
    var league = matchesList[0]['league'];
    console.log(matchesList.length);
    //渲染第一条赛事
    leagueName.innerHTML = league['name'];
    leagueLogo.src = league['logo'];
    
    homeTeamImage.src = teams['home']['logo'];
    homeTeamName.innerHTML = teams['home']['name'];
    awayTeamImage.src = teams['away']['logo'];
    awayTeamName.innerHTML = teams['away']['name'];
    lastMatchGoal.innerHTML = goals['home']+ " - " + goals['away'];

    //循环渲染剩余赛事
    for(var i = 1; i<matchesList.length;i++){
        addMatchTile(matchesList[i]);
    }

}))
.catch(err => {
    console.log(err);
});

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