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?
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>