从 JSON 获取数据并使用 JavaScript 显示在 HTML 表上以传递数据

Question

我试图从 API url 中获取数据，其中数据存储在 JSON 中。 我正在尝试获取数据并将其显示在 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场比赛。

Answer 1

我看到的其中一个错误是，在您的 for 循环中，您访问的是data.list而不是在 JSON 响应中定义的棕褐色data.races 。

所以改变：

for (let r of data.list) {

至：

for (let r of data.races) {

但这还不够。 您尝试访问仅具有race作为属性的.number上的 .number 和.name ，因此它最终会给您未定义的结果。 所以你需要改变：

<td>${r.number} </td>
<td>${r.name}</td>

至：

<td>${r.race.number} </td>
<td>${r.race.name}</td>

最后，您尝试在同一个 object 上访问.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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>`;
        }

        // Setting innerHTML as tab variable
        document.getElementById("racing").innerHTML = tab;
    }