是否有一种方法来使用JavaScript对象与引导表

Question

我试图创建一个带有bootstrap表的covid-19表，我想显示案例newcases death newdeath，但我不确定是否可以使用JavaScript对象来显示数字。我在页脚后面添加了脚本<script src="/module/index.js"></script>。

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>

Answer 1

有一个很多的东西需要被修复或更改或添加到HTML和JS中，但本质上你想做这样的事情。

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>

你必须弄清楚如何循环遍历数据中的所有对象，并将它们应用到表中。

必要时创建单独的问题。这些问题的大部分已经在这里得到了解答。还有一些预构建的JS库可以提供帮助。(你得自己去找。在SO上不允许询问库。)