Home I am using getElementById to get data from this API, but it is not returning anything in the table when I run it

Questions

I am using getElementById to get data from this API, but it is not returning anything in the table when I run it

June 14, 2022

Whenever I run the HTML this is what shows up:the table shows up fine but the data from the API site doesn’t show up.
JS

    async function fetchData() {
        const res=await fetch ("https://api.covidtracking.com/v1/us/current.json");
        const record=await res.json();
        document.getElementById("date").innerHTML=record.data[0].date;
        document.getElementById("positive").innerHTML=record.data[0].positive;
        document.getElementById("death").innerHTML=record.data[0].death;
        document.getElementById("deathIncrease").innerHTML=record.data[0].deathIncrease;
        
    }
    fetchData();

HTML

    <!DOCTYPE html>
    <html>
    <head>
        <title>US Covid Cases</title>
        <meta charset="utf-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container mt-3" style="width: 450px;">
            <h2 class="text-center">US Covid Cases</h2>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>positives</th>
                    <th>deaths</th>
                    <th>Death increase</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="date"></td>
                    <td id="positive"></td>
                    <td id="death"></td>
                    <td id="deathIncrease"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script type="text/javascript" src="MY PATH"></script>
    </html>

Is it a problem that the API URL ends in a .json? I am very new to this type of code. I’m not sure what is wrong in my code, is it a problem with the API website?

>Solution :

You can try to print out the record object, you will find that the data type is an array.

[
  {
    ...,
    "date": 20210307,
    "positive": 28756489,
    "death": 515151,
    "deathIncrease": 842
  }
]

So just replace record.data[0] with record[0]

async function fetchData() {
  const res = await fetch("https://api.covidtracking.com/v1/us/current.json");
  const record = await res.json();
  document.getElementById("date").innerHTML = record[0].date;
  document.getElementById("positive").innerHTML = record[0].positive;
  document.getElementById("death").innerHTML = record[0].death;
  document.getElementById("deathIncrease").innerHTML = record[0].deathIncrease;
}
fetchData();

<!DOCTYPE html>
<html>

<head>
  <title>US Covid Cases</title>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3" style="width: 450px;">
    <h2 class="text-center">US Covid Cases</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Date</th>
          <th>positives</th>
          <th>deaths</th>
          <th>Death increase</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="date"></td>
          <td id="positive"></td>
          <td id="death"></td>
          <td id="deathIncrease"></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>