1

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.

Javascript

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?

Lateralus
  • 792
  • 9
  • 19
añdré tâtè
  • 31
  • 4
  • Yeah, the data is outdated, I just wanted some practice with using APIs. This will not be used for anything besides my practice. – añdré tâtè Jun 14 '22 at 01:11
  • The way to get the value from the response needs to be adjusted, I posted the answer, you can refer to it – Ian Jun 14 '22 at 01:41

1 Answers1

1

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>
Ian
  • 1,198
  • 1
  • 5
  • 15