javascript - 从 JSON 中获取数据并使用 JavaScript 显示在 HTML 表上以传递数据
问题描述
我试图从数据以 JSON 格式存储的 API url 获取数据。我正在尝试获取数据并将其显示在 HTML 表上。我试图用谷歌搜索,结果如下所示,但它不起作用。
JSON 中的数据
{"date":"2021-06-06","name":"04","races":[{"race":{"number":"1","time":"12H15","name":"THE PRODIGAL CUP - Valeur [0-20] - 1500 M \r","ended":"0"},"horses":[{"number":"1","name":"OPAGUE","odds":"550","type":""},{"number":"2","name":"THE RIDDLER","odds":"360","type":""},{"number":"3","name":"VALERIN","odds":"2000","type":""},{"number":"4","name":"DAREDEVIL AVIATOR","odds":"1000","type":""},{"number":"5","name":"KALI'S CHAMP","odds":"310","type":""},{"number":"6","name":"LADY'S KNIGHT","odds":"1400","type":""},{"number":"7","name":"DESERT THIEF","odds":"2400","type":""},{"number":"8","name":"XANTHUS","odds":"500","type":""},{"number":"9","name":"REAL VISION","odds":"750","type":""},{"number":"10","name":"TIGER'S BOND","odds":"1400","type":""},{"number":"11","name":"DOUBLE GRATITUDE","odds":"-","type":"1"}]},{"race":{"number":"2","time":"12H50","name":"THE TRACKRIDERS CUP - Valeur [0-26] - 1450 M \r","ended":"0"},"horses":[{"number":"1","name":"ADAMO","odds":"530","type":""},{"number":"2","name":"DESERT ILLUSION","odds":"700","type":""},{"number":"3","name":"GIRATORIO","odds":"3000","type":""},{"number":"4","name":"SILVER SONG","odds":"250","type":""},{"number":"5","name":"TICKET TO CAIRO","odds":"900","type":""},{"number":"6","name":"FUNDRAISER","odds":"900","type":""},{"number":"7","name":"JET PATH","odds":"340","type":""},{"number":"8","name":"EAGLES VISION","odds":"1600","type":"2"}]},{"race":{"number":"3","time":"13H25","name":"THE EUGENE ROUSSET CUP - Valeur Benchmark 36 - 990 M \r","ended":"0"},"horses":[{"number":"1","name":"BENEV","odds":"370","type":""},{"number":"2","name":"EIGHT CITIES","odds":"600","type":""},{"number":"3","name":"CAPTAIN GARETT","odds":"280","type":""},{"number":"4","name":"GOOD BUDDY","odds":"2200","type":""},{"number":"5","name":"KINGSMAN","odds":"1000","type":""},{"number":"6","name":"RAHEEB","odds":"900","type":""},{"number":"7","name":"BADAWEE","odds":"1200","type":""},{"number":"8","name":"DOUBLETHINK","odds":"380","type":""},{"number":"9","name":"COUP FOR LUTE","odds":"1500","type":""}]},{"race":{"number":"4","time":"14H00","name":"THE SERGE HENRY CUP - Valeur Benchmark 41 - 1400 M \r","ended":"0"},"horses":[{"number":"1","name":"LIGHTHEARTED","odds":"550","type":""},{"number":"2","name":"SWAGGER JAGGER","odds":"280","type":""},{"number":"3","name":"CARLAS MAMBO","odds":"550","type":""},{"number":"4","name":"KING OF TARA","odds":"900","type":""},{"number":"5","name":"LUMBER JACKAROO","odds":"750","type":""},{"number":"6","name":"BESTDAY OF MYLIFE","odds":"3500","type":""},{"number":"7","name":"CAPTAIN GONE WILD","odds":"2000","type":""},{"number":"8","name":"SILVER HERITAGE","odds":"500","type":""},{"number":"9","name":"PERFECT PURSUIT","odds":"700","type":""}]},{"race":{"number":"5","time":"14H35","name":"THE SIR BEDE CLIFFORD CUP - Valeur Benchmark 46 - 1450 M \r","ended":"0"},"horses":[{"number":"1","name":"AFDEEK","odds":"370","type":""},{"number":"2","name":"OVATION AWARD","odds":"300","type":""},{"number":"3","name":"CHOIR OF ANGELS","odds":"650","type":""},{"number":"4","name":"CULTURE TRIP","odds":"950","type":""},{"number":"5","name":"DUKE'S DOMAIN","odds":"2500","type":""},{"number":"6","name":"SENATLA","odds":"720","type":""},{"number":"7","name":"SNOWY MOUNTAIN","odds":"2000","type":""},{"number":"8","name":"JUNIPER LANE","odds":"260","type":""},{"number":"9","name":"PROMISSORY","odds":"-","type":""},{"number":"10","name":"MAC 'N SCAR","odds":"-","type":""},{"number":"11","name":"ARLINGTONS REVENGE","odds":"-","type":"1"}]},{"race":{"number":"6","time":"15H10","name":"LA COUPE DU CENT CINQUANTENAIRE - Valeur G.3 - 1500 M \r","ended":"0"},"horses":[{"number":"1","name":"TWIST OF FATE","odds":"220","type":""},{"number":"2","name":"WHITE RIVER","odds":"210","type":""},{"number":"3","name":"UNDERCOVER AGENT","odds":"1500","type":""},{"number":"4","name":"PATROL OFFICER","odds":"2200","type":""},{"number":"5","name":"THE DAZZLER","odds":"1400","type":""},{"number":"6","name":"WALL TAG","odds":"1200","type":""},{"number":"7","name":"TRIPPI'S EXPRESS","odds":"700","type":""},{"number":"8","name":"HAYLOR","odds":"-","type":""},{"number":"9","name":"CONSUL OF WAR","odds":"-","type":"1"}]},{"race":{"number":"7","time":"15H45","name":"THE WINKING CUP - Valeur Benchmark 31 - 1400 M \r","ended":"0"},"horses":[{"number":"1","name":"AFRICAN ROCK","odds":"290","type":""},{"number":"2","name":"MR HARDY","odds":"630","type":""},{"number":"3","name":"CRAZY CHARLIE","odds":"1600","type":""},{"number":"4","name":"RIVER THAMES","odds":"350","type":""},{"number":"5","name":"STOCKBRIDGE","odds":"510","type":""},{"number":"6","name":"FAIRBANKS","odds":"330","type":""},{"number":"7","name":"LEARNING TO FLY","odds":"3500","type":""},{"number":"8","name":"AMANDLA","odds":"-","type":""},{"number":"9","name":"LE QUARTIER","odds":"-","type":""}]},{"race":{"number":"8","time":"16H20","name":"THE CHICKADEE PLATE - Valeur [0-25] - 1365 M \r","ended":"0"},"horses":[{"number":"1","name":"AL JAZEERA","odds":"500","type":""},{"number":"2","name":"HARDFALLINGRAIN","odds":"170","type":""},{"number":"3","name":"STRAIGHT","odds":"1400","type":""},{"number":"4","name":"DUKE OF YORK","odds":"650","type":""},{"number":"5","name":"SENTIDO","odds":"725","type":""},{"number":"6","name":"BRABANZIO","odds":"950","type":""},{"number":"7","name":"SEOUL","odds":"550","type":""},{"number":"8","name":"BIG SMOKE","odds":"2500","type":""}]}]}
我正在尝试的 Javascript
// api url
const api_url =
"https://www.smspariazitservices.com/applications/horse-racing-ws/mtc/actions/getDataBKS.php?date=2021-06-06&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>Number</th>
<th>Name</th>
<th>Odds</th>
</tr>`;
// Loop to access all rows
for (let r of data.list) {
tab += `<tr>
<td>${r.number} </td>
<td>${r.name}</td>
<td>${r.odds}</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>
我不太擅长 Javascript,也不知道我做错了什么。
这就是我想要实现的。
一天有8场比赛。
解决方案
我看到的其中一个错误是,在您的 for 循环中,您访问的是 JSON 响应中定义的data.list
棕褐色。data.races
所以改变:
for (let r of data.list) {
至:
for (let r of data.races) {
但这还不够。您尝试访问.number
仅作为属性.name
的对象race
,因此它最终会给您未定义的结果。所以你需要改变:
<td>${r.number} </td>
<td>${r.name}</td>
至:
<td>${r.race.number} </td>
<td>${r.race.name}</td>
最后,您尝试访问.odds
同一个对象,但几率位于.horses
数组中并且是“马”特定的。所以你需要遍历它们。
因此,解决方案如下:
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;
}
推荐阅读
- php - 在电子邮件中附加来自服务器的 .png 文件
- regex - 正则表达式检查以字符串开头而不是空格而不是整数值,并且整数值不应以零开头
- ruby - 如何引用嵌套的 ruby 哈希?
- django - django所有者权限详细视图
- html - 处理导航栏和网格响应
- spring - Spring Data JPA - 休眠 - 实体的@Version增量不正确
- typo3 - 排版在子项目后的菜单中附加内容
- django - 如何将基于 Django 模型的表单显示到页面中心(Crispy 表单)
- reactjs - React Navigation ReferenceError:找不到变量:isSelectionModeEnabled
- python - Pandas remove reversed duplicates across two columns