How to display data in an HTML table using Fetch API-CodePudding

I am trying to display the data I fetch from an API onto an HTML table. My code is below:

 <div >
  <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": "heisenbug-premier-league-live-scores-v1.p.rapidapi.com",
        "x-rapidapi-key": "3212cec680msh958b6c29cd67f12p1c6fb9jsn1454cea0e8ca",
    }
}).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;
        }
      }
    )
})

When this is is run the API is fetched and an object is successfully retrieved. However, it is not displaying in the table. I have checked console log and there are no errors.

CodePudding user response：

Since data is an Object, it has not attribute length, and thus the condition becomes false.

However, the required data is supposedly in data.records. Simply changing that if condition to data.records.length > 0 and instead of iterating over data, doing so over data.records fixes the issue.

fetch("https://heisenbug-premier-league-live-scores-v1.p.rapidapi.com/api/premierleague/table", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "heisenbug-premier-league-live-scores-v1.p.rapidapi.com",
        "x-rapidapi-key": "3212cec680msh958b6c29cd67f12p1c6fb9jsn1454cea0e8ca",
    }
}).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 >
    <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>

EDIT: As pointed out by @Phil, the data check is redundant, thus removed it from the snippet.