Cada vez que ejecuto el HTML, esto es lo que aparece: la tabla se muestra bien, pero los datos del sitio API no aparecen.
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>¿Es un problema que la URL de la API termine en .json? Soy muy nuevo en este tipo de código. No estoy seguro de qué está mal en mi código, ¿es un problema con el sitio web de la API?
Puede intentar imprimir el objeto de record , encontrará que el tipo de datos es una matriz.
[ { ..., "date": 20210307, "positive": 28756489, "death": 515151, "deathIncrease": 842 } ] Así que simplemente reemplace record.data[0] con 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>