I am trying to create a covid-19 tables with bootstrap tables I want to display cases newcases death newdeath, But I'm not sure if I can use JavaScript Object to display number.
I add the script <script src="/module/index.js"></script> after the footer.
Github Repo: https://github.com/drjoeycadieux/covid-virus.git
index.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,
},
];
index.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>
There are a lot of things that need to be fixed or changed or added to the HTML and the JS, but essentially you want to do something like this.
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>You'll have to figure out how to loop through all the objects in your data and apply them to the table.
Create separate questions if necessary. Most of this has already been asked and answered here. There are also prebuilt JS libraries that could help. (You'll have to search for those. Asking about libraries isn't allowed on SO.)