Soy nuevo en la codificación en general y estoy probando algunos proyectos para aprender. Quiero escribir un sitio web que muestre diferentes estadísticas de Fórmula 1 para poder aprender sobre el uso de API.
Tengo un menú desplegable en el que se muestran todas las carreras de la temporada actual + el número de la carrera (la primera carrera es la número 1). Quiero que Fetch URL cambie según lo que elija el usuario
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; });quiero que el número después del año en la url de recuperación (en el código "11") cambie al valor. redondo (en los datos del menú). Y no tengo idea de cómo hacer eso. También lo siento por un código probablemente muy caótico
Puede poner el valor en la opción de selección una vez que esté seleccionado en la URL y luego llamar a la API en la nueva URL
debajo de los comentarios en el código lo explica más claramente
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>