[英]Create multiple rows in HTML table using data from a JSON file
I'm trying to take data from a JSON file and create a html table, I am able to create the first row of the table using the below code:我正在尝试从 JSON 文件中获取数据并创建一个 html 表,我能够使用以下代码创建表的第一行:
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<table id='overview-table'>
<tr>
<th>owner Name</th>
<th>date</th>
<th>shares Held</th>
<th>shares Change</th>
<th>shares ChangePCT</th>
<th>market Value</th>
</tr>
<tr>
<td id='ownerName'></td>
<td id='date'></td>
<td id='sharesHeld'></td>
<td id='sharesChange'></td>
<td id='sharesChangePCT'></td>
<td id='marketValue'></td>
</tr>
</table>
<script type="text/javascript">
const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
const requestJSON = async url => {
const response = await (await fetch(url)).json();
ownerName.innerHTML = response.ownerName[0];
date.innerHTML = response.date[0];
sharesHeld.innerHTML = response.sharesHeld[0];
sharesChange.innerHTML = response.sharesChange[0];
sharesChangePCT.innerHTML = response.sharesChangePCT[0];
marketValue.innerHTML = response.marketValue[0];
}
requestJSON(requestUrl);
</script>
</body>
</html>
The first row is created successfully, however if I want to include more rows then I would have to repeat the same bunch of code over again.第一行已成功创建,但是如果我想包含更多行,那么我将不得不再次重复同一组代码。 Is there not a more efficient way of doing this?没有更有效的方法吗?
Here is my JSON data:这是我的 JSON 数据:
{
"ownerName":{
"0":"VANGUARD GROUP INC",
"1":"BLACKROCK INC.",
"2":"BERKSHIRE HATHAWAY INC",
"3":"STATE STREET CORP",
"4":"FMR LLC",
"5":"GEODE CAPITAL MANAGEMENT, LLC",
"6":"PRICE T ROWE ASSOCIATES INC \/MD\/",
"7":"MORGAN STANLEY",
"8":"NORTHERN TRUST CORP",
"9":"BANK OF AMERICA CORP \/DE\/"
},
"date":{
"0":"09\/30\/2022",
"1":"09\/30\/2022",
"2":"09\/30\/2022",
"3":"09\/30\/2022",
"4":"09\/30\/2022",
"5":"09\/30\/2022",
"6":"09\/30\/2022",
"7":"09\/30\/2022",
"8":"09\/30\/2022",
"9":"09\/30\/2022"
},
"sharesHeld":{
"0":"1,272,378,901",
"1":"1,020,245,185",
"2":"894,802,319",
"3":"591,543,874",
"4":"350,900,116",
"5":"279,758,518",
"6":"224,863,541",
"7":"182,728,771",
"8":"176,084,862",
"9":"142,260,591"
},
"sharesChange":{
"0":"-4,940,153",
"1":"-8,443,132",
"2":"0",
"3":"-6,634,650",
"4":"6,582,142",
"5":"1,502,326",
"6":"-13,047,242",
"7":"278,206",
"8":"-3,744,060",
"9":"-6,873,324"
},
"sharesChangePCT":{
"0":"-0.387%",
"1":"-0.821%",
"2":"0%",
"3":"-1.109%",
"4":"1.912%",
"5":"0.54%",
"6":"-5.484%",
"7":"0.152%",
"8":"-2.082%",
"9":"-4.609%"
},
"marketValue":{
"0":"$192,498,204",
"1":"$154,352,894",
"2":"$135,374,643",
"3":"$89,494,673",
"4":"$53,087,679",
"5":"$42,324,666",
"6":"$34,019,605",
"7":"$27,645,036",
"8":"$26,639,879",
"9":"$21,522,605"
},
You can use a loop and duplicate a row template each time.您可以使用循环并每次复制一个行模板。 Rather than using IDs for your table cells, you'll want to use classes as they'll be repeated throughout the document.与其为表格单元格使用 ID,不如使用类,因为它们会在整个文档中重复出现。
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<table id='overview-table'>
<tr>
<th>owner Name</th>
<th>date</th>
<th>shares Held</th>
<th>shares Change</th>
<th>shares ChangePCT</th>
<th>market Value</th>
</tr>
<tr id='rowTemplate'>
<td class='ownerName'></td>
<td class='date'></td>
<td class='sharesHeld'></td>
<td class='sharesChange'></td>
<td class='sharesChangePCT'></td>
<td class='marketValue'></td>
</tr>
</table>
<script type="text/javascript">
const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
const requestJSON = async url => {
const response = await (await fetch(url)).json();
const limit = Math.max(...Object.keys(response.ownerName)) + 1;
for(let index = 0; index < limit; index++)
{
let newRow = rowTemplate.cloneNode(true);
newRow.id = '';
newRow.querySelector('.ownerName').innerHTML = response.ownerName[index];
newRow.querySelector('.date').innerHTML = response.date[index];
newRow.querySelector('.sharesHeld').innerHTML = response.sharesHeld[index];
newRow.querySelector('.sharesChange').innerHTML = response.sharesChange[index];
newRow.querySelector('.sharesChangePCT').innerHTML = response.sharesChangePCT[index];
newRow.querySelector('.marketValue').innerHTML = response.marketValue[index];
rowTemplate.parentNode.appendChild(newRow);
}
rowTemplate.parentNode.removeChild(rowTemplate); // Tidy up and remove the template
}
requestJSON(requestUrl);
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.