Im new to coding in general and trying out some projects to learn. I want to write a website that displays different Formula1 stats so i could learn about using api's.
I have a Dropdown menu in which all races of the current Season are displayed + the number of the race (first race being number 1). I want the Fetch URL to change depending on which the user chooses
let roundsArray = []
fetch("https://ergast.com/api/f1/2022/11/results.json").then((data) =>{
return data.json();
}).then((objectData)=>{
console.log(roundsArray);
let result = objectData.MRData.RaceTable.Races[0].Results;
let race = objectData.MRData.RaceTable.Races[0].raceName;
document.getElementById('circuit').innerHTML = race;
let tableData="";
result.map((value)=>{
tableData+=`
<tr>
<td>${value.position}</td>
<td>${value.Driver.givenName + " " + value.Driver.familyName}</td>
<td>${value.Constructor.name}</td>
<td>${value.points}</td>
</tr>`;
});
document.getElementById("table_body").
innerHTML=tableData;
});
fetch("https://ergast.com/api/f1/current.json").then((data) =>{
return data.json();
}).then((objectData)=>{
let races = objectData.MRData.RaceTable.Races;
races.forEach(element => {
let testing = { title: element.raceName, round: element.round }
roundsArray.push(testing)
});
console.log(roundsArray);
let menuData="";
roundsArray.map((value)=>{
menuData+=`
<option>${value.round} - ${value.title}</option>
`;
});
document.getElementById("chose").
innerHTML=menuData;
});
i want the number after the year in the fetch url(in the code "11") to change to the value.round (in menudata). And have no idea how to go about doing that. Also sorry for some probably very chaotic code
You can put the value in the select option once its selected into the url and then call the API on the new url
below comments in the code explains it more clearly
function getSelectedUrl(){
// get selected option
var selectedOption = document.getElementById("RaceList").value;
// put the selected option in the url and return it
return `https://ergast.com/api/f1/2022/${selectedOption}/results.json`;
}
function getRace(){
// call getSelectedUrl to get new url based in selected option
var newUrl = getSelectedUrl();
// call the API with the new url
fetch(newUrl).then((data) =>{
return data.json();
}).then((objectData)=>{
console.log(objectData);
});
}
// When you select an option it will call getRace function
document.getElementById("RaceList").addEventListener("change", getRace);<select id="RaceList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>