Fetch data from JSON and display on HTML table using JavaScript to pass the data

  html, javascript, json, php

I a trying to fetch data from a API url in which the data is stored in JSON. I am trying to fetch the data and display it on an HTML table. I tried to google and came out with something like the below but it is not working.

The data in the 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":""}]}]}

The Javascript I am trying

// 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;
}

MY 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>

I am not too good in Javascript and don’t know what I am doing wrong.

Source: Ask Javascript Questions

LEAVE A COMMENT