Soy nuevo en las API y estoy creando una página web que llama a una API y obtiene algunos datos para crear una tabla y mostrarla. Actualmente, la página ejecuta la función buildTable() al cargar la página y toma un valor de URL. Aquí está el código completo de la página:
function buildTable(url) { fetch(url) .then(response => response.json()) .then(serverList => { let table = document.querySelector('#mainTable'); table.innerHTML = ''; table.innerHTML = '<tr><th>Server Name</th><th>Rank</th><th>Players</th><th>Last Wipe</th><th>Country</th></tr>'; for (let item in serverList.data) { console.log(serverList.data[item]); let row = document.createElement('tr'); let serverName = document.createElement('td'); serverName.innerHTML = `${serverList.data[item].attributes.name}`; let serverRank = document.createElement('td'); serverRank.innerHTML = `${serverList.data[item].attributes.rank}`; let serverPlayers = document.createElement('td'); serverPlayers.innerHTML = `${serverList.data[item].attributes.players}/${serverList.data[item].attributes.maxPlayers}`; let serverWipe = document.createElement('td'); let currentTime = new Date(); let wipeTimeString = `${serverList.data[item].attributes.details.rust_last_wipe}`; let wipeTime = new Date(wipeTimeString); let daysWiped = (currentTime.getDate() - wipeTime.getDate()); let wipeMessage = `${daysWiped} Days ago`; serverWipe.innerHTML = `${wipeMessage}`; let serverCountry = document.createElement('td'); serverCountry.innerHTML = `${serverList.data[item].attributes.country}`; row.appendChild(serverName); row.appendChild(serverRank); row.appendChild(serverPlayers); row.appendChild(serverWipe); row.appendChild(serverCountry); table.appendChild(row); } })}
buildTable(`https://api.battlemetrics.com/servers?page[size]=100&filter[game]=rust`);Para filtrar/ordenar datos de la API, solo necesito cambiar la URL existente agregando parámetros al final. Ejemplo:
`https://api.battlemetrics.com/servers?page[size]=100&filter[game]=rust&filter[search]=large`Mi pregunta es ¿cómo tomo la entrada del usuario para cambiar la URL y cargar los nuevos datos? Intenté usar un formulario con entradas de texto y llamar a la función buildTable() con la nueva URL, pero solo actualiza la página y se muestran los datos predeterminados de buildTable(). También probé preventdefault() con el formulario pero no funcionó.
Mi pregunta es ¿cómo tomo la entrada del usuario para cambiar la URL y cargar los nuevos datos?
Si usa un objeto de URL , puede configurar convenientemente los parámetros de consulta individuales.
Aquí hay un ejemplo asumiendo un cuadro de entrada #filterInput :
const filterInput = document.querySelector('#filterInput') const url = new URL('https://api.battlemetrics.com/servers?page[size]=100&filter[game]=rust') url.searchParams.set('filter[search]', filterInput.value) buildTable(url)Intenté usar un formulario con entradas de texto [...] pero solo actualiza la página
Si usa un formulario para la entrada del usuario, también debe llamar a preventDefault en el evento de envío. Tenga en cuenta que está con D mayúscula (a diferencia de lo que escribió en su pregunta) y debe llamarlo en el objeto de evento que se pasa como primer argumento a su detector de eventos:
document.querySelector('#myForm').addEventListener('submit', e => { e.preventDefault() // code from above here })