如何使用 Fetch API 在 HTML table 中显示数据

Question

我正在尝试将从 API 获取的数据显示到 HTML table。我的代码如下：

 <div class="container2">
  <table class="table">
    <thead>
      <tr>
        <th>TEAM</th>
        <th>GP</th>
        <th>WON</th>
        <th>DRAW</th>
        <th>LOST</th>
        <th>POINTS</th>
        <th>SCORED</th>
        <th>CONCEDED</th>
      </tr>
    </thead>
    <tbody id="data">
    </tbody>
  </table>
</div>

fetch("https://heisenbug-premier-league-live-scores-v1.p.rapidapi.com/api/premierleague/table", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "host",
        "x-rapidapi-key": "key",
    }
}).then(
  response => {
    response.json().then(
      data =>{
       
        console.log(data);
        if (data.length > 0){
          var temp = "";
          
          data.forEach((x) => {
            temp += "<tr>";
            temp += "<td>"+ x.team +"</td>";
            temp += "<td>"+ x.played +"</td>";
            temp += "<td>"+ x.win +"</td>";
            temp += "<td>"+ x.draw +"</td>";
            temp += "<td>"+ x.loss +"</td>";
            temp += "<td>"+ x.goalsFor +"</td>";
            temp += "<td>"+ x.goalsAgainst +"</td>";
            temp += "<td>"+ x.points +"</td>";
            temp += "</tr>"
          });
          
          document.getElementById("data").innerHTML = temp;
        }
      }
    )
})

当这是运行时，将提取 API 并成功检索对象。但是，它没有显示在 table 中。我检查了控制台日志，没有错误。

Answer 1

由于data是一个对象，它没有属性length，因此条件变为false。

然而，所需的数据应该在 data.records 中。只需将 if 条件更改为 data.records.length > 0 而不是迭代 data，而是在 data.records 上进行迭代即可解决问题。

fetch("https://heisenbug-premier-league-live-scores-v1.p.rapidapi.com/api/premierleague/table", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "host",
        "x-rapidapi-key": "key",
    }
}).then(
    response => {
        response.json().then(
            data => {

                console.log(data);
                var temp = "";

                data.records.forEach((x) => {
                    temp += "<tr>";
                    temp += "<td>" + x.team + "</td>";
                    temp += "<td>" + x.played + "</td>";
                    temp += "<td>" + x.win + "</td>";
                    temp += "<td>" + x.draw + "</td>";
                    temp += "<td>" + x.loss + "</td>";
                    temp += "<td>" + x.goalsFor + "</td>";
                    temp += "<td>" + x.goalsAgainst + "</td>";
                    temp += "<td>" + x.points + "</td>";
                    temp += "</tr>"
                });

                document.getElementById("data").innerHTML += temp;
            }
        )
    })

<div class="container2">
    <table class="table" border="1">
        <thead>
            <tr>
                <th>TEAM</th>
                <th>GP</th>
                <th>WON</th>
                <th>DRAW</th>
                <th>LOST</th>
                <th>POINTS</th>
                <th>SCORED</th>
                <th>CONCEDED</th>
            </tr>
        </thead>
        <tbody id="data"></tbody>
    </table>
</div>

编辑： 正如@Phil 所指出的，数据检查是多余的，因此将其从代码段中删除。

如何使用 Fetch API 在 HTML table 中显示数据

How to display data in an HTML table using Fetch API

html

javascript

fetch-api