Estoy tratando de crear tablas covid-19 con tablas de arranque. Quiero mostrar casos, casos nuevos, muerte, muerte nueva, pero no estoy seguro de poder usar el objeto JavaScript para mostrar el número. Agrego el script <script src="/module/index.js"></script> después del pie de página.
Repositorio de Github: https://github.com/drjoeycadieux/covid-virus.git
índice.js
document.getElementById("cases").innerHTML = cases; document.getElementById("newCases").innerHTML = newCases; document.getElementById("death").innerHTML = death; document.getElementById("newDeath").innerHTML = newDeath; const dailyOverview = [ { date: '2021-09-09', cases: 395155, newCases: 703, death: 11297, newDeath: 1, }, ];índice.html
<table class="table table-striped table-dark"> <thead> <tr> <th scope="col">Covid-19 Canada</th> <th scope="col">Quebec</th> <th scope="col">Ontario</th> <th scope="col">Manitoba</th> </tr> </thead> <tbody> <tr> <th scope="row">Cases</th> <td id="cases"></td> <td id="newCases"></td> <td id="death"></td> <td id="newDeath"></td> </tr> <tr> <th scope="row">newCases</th> <td id="newCases"></td> <!-- <td>Thornton</td> <td>@fat</td> --> </tr> <tr> <th scope="row">Death</th> <td id="death"></td> <!-- <td>the Bird</td> <td>@twitter</td> --> </tr> <tr> <th scope="row">newDeath</th> <td id="newDeath"></td> <!-- <td>the Bird</td> <td>@twitter</td> --> </tr> </tbody> </table>Hay muchas cosas que deben corregirse, cambiarse o agregarse al HTML y al JS, pero esencialmente desea hacer algo como esto.
const dailyOverview = [{ date: '2021-09-09', cases: 395155, newCases: 703, death: 11297, newDeath: 1 }]; // dailyOverview[0] gets the first object, wrapped in braces {}. // dailyOverview[1] would get the second object in braces. // adding '.cases', '.newCases', etc. gets the property you want. document.getElementById("cases").innerHTML = dailyOverview[0].cases; document.getElementById("newCases").innerHTML = dailyOverview[0].newCases; document.getElementById("death").innerHTML = dailyOverview[0].death; document.getElementById("newDeath").innerHTML = dailyOverview[0].newDeath; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <table class="table table-striped table-dark"> <thead> <tr> <th scope="col">Covid-19 Canada</th> <th scope="col">Quebec</th> <th scope="col">Ontario</th> <th scope="col">Manitoba</th> </tr> </thead> <tbody> <tr> <th scope="row">Cases</th> <td id="cases"></td> <td id="newCases"></td> <td id="death"></td> <td id="newDeath"></td> </tr> <tr> <th scope="row">newCases</th> <td id="newCases"></td> <td></td> <td></td> </tr> <tr> <th scope="row">Death</th> <td id="death"></td> <td></td> <td></td> </tr> <tr> <th scope="row">newDeath</th> <td id="newDeath"></td> <td></td> <td></td> </tr> </tbody> </table>Tendrá que descubrir cómo recorrer todos los objetos en sus datos y aplicarlos a la tabla.
Cree preguntas separadas si es necesario. La mayor parte de esto ya ha sido preguntado y respondido aquí. También hay bibliotecas JS precompiladas que podrían ayudar. (Tendrá que buscarlos. No se permite preguntar sobre bibliotecas en SO).