Estoy creando una página web simple donde el usuario puede ingresar un año en un campo de texto y ver una lista de carreras de F1 para ese año.
Obtengo mis datos de esta API pública: http://ergast.com/mrd/ Necesito lograr esto en Vanilla JS. No quiero usar jQuery.
Hasta ahora he probado el método de búsqueda y puedo registrar la consola:
fetch('http://ergast.com/api/f1/2020.json') .then(response => response.json()) .then(data => console.log(data));Esto me muestra todas las carreras para el año 2020.
Sin embargo, necesito que el usuario ingrese el año, que luego se consulta con la API y luego se deben mostrar los resultados.
El HTML se ve así:
<form> <label> <span>Full name</span> <input type="text" id="test" placeholder=""> </label> <button type="submit" id="form-submit"> Button </button> </form>Ya hay muchas preguntas similares en SO, pero ninguna me ha resultado útil.
EDITAR
También necesito probar y acceder a los resultados de la carrera de un año determinado. Los resultados de la carrera están anidados dentro de la matriz > data.MRData.RaceTable.Races.0.Results y no estoy seguro de cómo acceder a estos valores.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> fieldset { margin: 10px; } </style> </head> <body> <form> <label> <span>Year</span> <input value="2020" type="text" id="year" placeholder="type a year" /> </label> <button type="submit" id="form-submit"> Button </button> </form> <div id="result"></div> <script> const result = document.getElementById("result"); document.querySelector("form").addEventListener("submit", (e) => { e.preventDefault(); const year = document.getElementById("year").value; fetch("http://ergast.com/api/f1/" + year + ".json") .then((response) => response.json()) .then((data) => { result.innerHTML = `<b>results for ${year}</b>`; data.MRData.RaceTable.Races.forEach((race) => { result.innerHTML += ` <fieldset> <h4> ${race.raceName} </h4> <a target="_blank" href="${race.Circuit.url}"> ${race.Circuit.circuitName} </a> <p> ${race.date} - ${race.Circuit.Location.country} </p> </fieldset>` }); }); }); </script> </body> </html>Aquí hay un enfoque. Sin embargo, deberá pensar en cómo desea mostrar los datos. Muchos párrafos no son muy fáciles de usar.
let body = document.querySelector('body'); document.querySelector("form").addEventListener('submit', (e) => { const year = document.getElementById('year').value; e.preventDefault(); fetch(`https://ergast.com/api/f1/${year}.json`) .then(response => response.json()) .then(data => { (data.MRData.RaceTable.Races).forEach(races => { for(race in races) { let para = document.createElement('p'); para.innerText = races[race]; body.appendChild(para); } }) }) }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <label> <span>Year</span> <input type="text" id="year" placeholder=""> </label> <button type="submit" id="form-submit"> Button </button> </form> <script src="./script.js"></script> </body> </html>La URL de la API es solo una cadena , por lo tanto, la forma más fácil sería agregar un botón a su formulario y colocar la llamada a la API en el atributo de evento onclick() del botón.
<form> <label> <span>Full name</span> <input type="text" id="test"> </label> <button id="form-submit" onclick="apiFetcher()"> Fetch! </button> </form> <p id="result"></>Y la función JS:
function apiFetcher() { var year = document.getElementById("test").value; fetch("http://ergast.com/api/f1/" + year + ".json") .then(response => response.json()) .then(data => document.getElementById("result").innerText = data); }Tenga en cuenta que hay alrededor de 10 o más de 10 formas de obtener el valor de un elemento de
input, pero en cuanto a llamar a la API , debe concatenar el año ingresado por el usuario con el resto de la URL , sin importar cómo obtenga el valor.
Al no usar<button type="submit">sino un simple<button>, elimina la necesidad de manejar el evento predeterminado.