javascript - 从 JSON 中获取数据并使用 JavaScript 显示在 HTML 表上以传递数据 - 按种族过滤
问题描述
我试图从数据以 JSON 格式存储的 API URL 获取数据。我正在尝试获取数据并将其显示在 HTML 表上。我试着用谷歌搜索，结果如下。我想逐个展示比赛。例如，我想让 HTML 代码在另一列上仅显示 Race 1 和 Race 2。JSON 中的数据。
目前，我的代码正在获取所有比赛，而不仅仅是一场。
来自 JSON 的数据
{
"date":"2021-06-19",
"name":"05",
"races":[
{
"race":{
"number":"1",
"time":"12H15",
"name":"THE TOMMY BOY CUP - Valeur [0-25] - 1400 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"TYRANDEUS",
"odds":"550",
"type":""
},
{
"number":"2",
"name":"ZODIAC JACK",
"odds":"1200",
"type":""
},
{
"number":"3",
"name":"THE RIGHT STUFF",
"odds":"650",
"type":""
},
{
"number":"4",
"name":"AFTER THE ORDER",
"odds":"1400",
"type":""
},
{
"number":"5",
"name":"DOUBLE WINNER",
"odds":"3000",
"type":""
},
{
"number":"6",
"name":"BLEU ROYALE",
"odds":"430",
"type":""
},
{
"number":"7",
"name":"RED FORCE ONE",
"odds":"200",
"type":""
},
{
"number":"8",
"name":"TIME IS GOLD",
"odds":"450",
"type":""
}
]
},
{
"race":{
"number":"2",
"time":"12H50",
"name":"THE MTCSPORTSANDLEISURE.COM CUP - Valeur [0-26] - 990 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"FAIRBANKS",
"odds":"1500",
"type":""
},
{
"number":"2",
"name":"CLOUD SEEDER",
"odds":"1200",
"type":""
},
{
"number":"3",
"name":"COURTROOM MAGIC",
"odds":"650",
"type":""
},
{
"number":"4",
"name":"FOLLOW SUIT",
"odds":"450",
"type":""
},
{
"number":"5",
"name":"MARULA",
"odds":"220",
"type":""
},
{
"number":"6",
"name":"ZENO",
"odds":"900",
"type":""
},
{
"number":"7",
"name":"ZENZERO",
"odds":"300",
"type":""
},
{
"number":"8",
"name":"ARTAX",
"odds":"2000",
"type":""
}
]
},
{
"race":{
"number":"3",
"time":"13H25",
"name":"THE WORLD VETERINARY DAY CUP - Valeur Benchmark 31 - 1600 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"AFFRANCHI",
"odds":"2500",
"type":""
},
{
"number":"2",
"name":"AFRICAN ROCK",
"odds":"270",
"type":""
},
{
"number":"3",
"name":"IMPERIAL RAGE",
"odds":"800",
"type":""
},
{
"number":"4",
"name":"SENOR'S GUEST",
"odds":"800",
"type":""
},
{
"number":"5",
"name":"CAMP DAVID",
"odds":"300",
"type":""
},
{
"number":"6",
"name":"DREAMFOREST",
"odds":"900",
"type":""
},
{
"number":"7",
"name":"ITALIAN WAY",
"odds":"500",
"type":""
},
{
"number":"8",
"name":"LIT",
"odds":"1200",
"type":""
},
{
"number":"9",
"name":"THE GREY CRUSADER",
"odds":"2000",
"type":""
},
{
"number":"10",
"name":"OVERDOSE",
"odds":"3300",
"type":""
},
{
"number":"11",
"name":"STAR OF ZEUS",
"odds":"-",
"type":"1"
}
]
},
{
"race":{
"number":"4",
"time":"14H00",
"name":"THE DR. V. PIERRE GOUPILLE CUP - Valeur Benchmark 41 - 1365 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"BOLD PHOENIX",
"odds":"300",
"type":""
},
{
"number":"2",
"name":"CLOUDED HILL",
"odds":"1400",
"type":""
},
{
"number":"3",
"name":"KING OF TARA",
"odds":"500",
"type":""
},
{
"number":"4",
"name":"HIGH VOLTAGE",
"odds":"500",
"type":""
},
{
"number":"5",
"name":"SAVVY",
"odds":"2000",
"type":""
},
{
"number":"6",
"name":"VARSIDE",
"odds":"315",
"type":""
},
{
"number":"7",
"name":"YANKEEDOODLEDANDY",
"odds":"800",
"type":""
},
{
"number":"8",
"name":"WHY WOULDN'T YEW",
"odds":"550",
"type":""
}
]
},
{
"race":{
"number":"5",
"time":"14H35",
"name":"THE WORLD FOCUS CUP - Valeur Benchmark 46 - 1500 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"CARBON FIBRE",
"odds":"2200",
"type":""
},
{
"number":"2",
"name":"JOHN HANCOCK",
"odds":"2200",
"type":""
},
{
"number":"3",
"name":"CYBER SPECIAL",
"odds":"470",
"type":""
},
{
"number":"4",
"name":"DROP KICK",
"odds":"230",
"type":""
},
{
"number":"5",
"name":"SYDS LIASON",
"odds":"700",
"type":""
},
{
"number":"6",
"name":"TRIP TO THE SKY",
"odds":"430",
"type":""
},
{
"number":"7",
"name":"JET STREAM",
"odds":"500",
"type":""
},
{
"number":"8",
"name":"BONNIE PRINCE",
"odds":"2000",
"type":""
},
{
"number":"9",
"name":"THE BYZANTINE",
"odds":"3000",
"type":""
},
{
"number":"10",
"name":"GIGGIN",
"odds":"1400",
"type":""
},
{
"number":"11",
"name":"SOCKEROO",
"odds":"-",
"type":"1"
}
]
},
{
"race":{
"number":"6",
"time":"15H10",
"name":"THE GUNNESS GUJADHUR CUP - Valeur Benchmark 66 - 1450 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"MARAUDING",
"odds":"350",
"type":""
},
{
"number":"2",
"name":"STOPALLTHECLOCKS",
"odds":"1000",
"type":""
},
{
"number":"3",
"name":"IDEAL SECRET",
"odds":"550",
"type":""
},
{
"number":"4",
"name":"SPECIAL BLEND",
"odds":"4000",
"type":""
},
{
"number":"5",
"name":"TOWER OF WISDOM",
"odds":"500",
"type":""
},
{
"number":"6",
"name":"VAR AND AWAY",
"odds":"2500",
"type":""
},
{
"number":"7",
"name":"RED MARS",
"odds":"1700",
"type":""
},
{
"number":"8",
"name":"TRIPLE FATE LINE",
"odds":"2000",
"type":""
},
{
"number":"9",
"name":"BACKPACKER",
"odds":"4000",
"type":""
},
{
"number":"10",
"name":"DYNAMITE JACK",
"odds":"200",
"type":""
},
{
"number":"11",
"name":"STREAM AHEAD",
"odds":"-",
"type":"1"
}
]
},
{
"race":{
"number":"7",
"time":"15H45",
"name":"THE LALDHEER CUP - Valeur Benchmark 36 - 1500 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"APOLLO STAR",
"odds":"1000",
"type":""
},
{
"number":"2",
"name":"BOUND BY DUTY",
"odds":"1000",
"type":""
},
{
"number":"3",
"name":"DO OR DARE",
"odds":"550",
"type":""
},
{
"number":"4",
"name":"ITDAWNEDONME",
"odds":"500",
"type":""
},
{
"number":"5",
"name":"SAND PATH",
"odds":"350",
"type":""
},
{
"number":"6",
"name":"ALAMEERY",
"odds":"2500",
"type":""
},
{
"number":"7",
"name":"BOLLINGER",
"odds":"1600",
"type":""
},
{
"number":"8",
"name":"BORYA",
"odds":"800",
"type":""
},
{
"number":"9",
"name":"G I JOE",
"odds":"300",
"type":""
},
{
"number":"10",
"name":"WELL CONNECTED",
"odds":"2000",
"type":""
},
{
"number":"11",
"name":"NAO FAZ MAL",
"odds":"-",
"type":"1"
}
]
},
{
"race":{
"number":"8",
"time":"16H20",
"name":"THE RAYMOND ANTELME PLATE - Valeur [0-26] - 1600 M \r",
"ended":"0"
},
"horses":[
{
"number":"1",
"name":"HIGH KEY",
"odds":"300",
"type":""
},
{
"number":"2",
"name":"SUPREME ORATOR",
"odds":"800",
"type":""
},
{
"number":"3",
"name":"CANARY ISLAND",
"odds":"270",
"type":""
},
{
"number":"4",
"name":"RUBY SPIRIT",
"odds":"450",
"type":""
},
{
"number":"5",
"name":"TICKET HOLDER",
"odds":"1500",
"type":""
},
{
"number":"6",
"name":"WEST COAST WARRIOR",
"odds":"470",
"type":""
},
{
"number":"7",
"name":"JET PATH",
"odds":"1800",
"type":""
},
{
"number":"8",
"name":"DAREDEVIL AVIATOR",
"odds":"2500",
"type":""
},
{
"number":"9",
"name":"GREATFIVEEIGHT",
"odds":"2500",
"type":""
}
]
}
]
}
Javascript
// api url
const api_url =
"https://www.smspariazitservices.com/applications/horse-racing-ws/mtc/actions/getDataBKS.php?date=2021-06-19&mno=05";
// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
if (response) {
hideloader();
}
show(data);
}
// Calling that async function
getapi(api_url);
// Function to hide the loader
function hideloader() {
document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
let tab =
`<tr>
<th>Race #</th>
<th>Race Name</th>
<th>Race Date</th>
</tr>`;
// Loop to access all rows
for (let r of data.races) {
let { race, horses } = r;
tab += `<tr>
<td>${race.number} </td>
<td>${race.name}</td>
<td>${race.time}</td>
</tr>
<tr><td>Number</td><td>Name</td><td>Odds</td></tr>
`;
tab += horses.map( ({number, name, odds}) => `<tr><td>${number}</td><td>${name}</td><td>${odds}</td></tr>`).join();
tab += `<tr><td> </td><td> </td><td> </td></tr>`;
}
// Setting innerHTML as tab variable
document.getElementById("racing").innerHTML = tab;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Here a loader is created which
loads till response comes -->
<div class="d-flex justify-content-center">
<div class="spinner-border"
role="status" id="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
<h1>ODDS</h1>
<!-- table for showing data -->
<table id="racing"></table>
</body>
</html>
我想实现类似这张图片的 目标
谢谢你的帮助
解决方案
推荐阅读
- spring - 简单的基于域类的 Spring Kafka 集成
- terraform - 地形 | 模块中的变量 instance_type 应该是字符串类型，得到地图
- apache-kafka - kafka在哪里存储内部主题的偏移量？
- c# - 如何使用我的数组方法使用深度克隆？
- gatsby - 运行任何 gatsby 命令显示“-bash: gatsby: command not found”
- flutter - FlutterDriver 问题，无法通过 Key 找到 Widget
- python - 如何在另一个任务旁边运行 tkinter 的 after event？
- c++ - 是否可以在 win32 或 MFC 应用程序中从 Windows 获取“磁盘空间不足”通知？
- c# - DotNetCore3.0 WPF - error - Project file is incomplete. Expected imports are missing
- ruby-on-rails - 参数未提交