Display Data Fetched From Json In Html Tables Using Javascript - Different Part Of Data In Different Section On Website

I am using JScript to fetch data from a JSON API url. (I have added the data in the JSON file below - These are 8 horse races and each races displays Horse number, Horse name and t

Solution 1:

You can remove if (race.number == 2) from your function show and let only one function show. When you call innerHTML method for fill the table you can use race.number for select the corrispondent table. Your code will be:

function show(data) {
    
    // Loop to access all rows 
    for (let r of data.races) {
        let { race, horses } = r;
        let tab = 
        `<tr><th>Race #</th><th>Race Name</th><th>Race Date</th></tr>`;
        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("race"+race.number).innerHTML = tab;
    }     
}

In your html page you can insert table tag with id="race1", id="race2", ecc. where you want to display each race result