<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"> <link rel="stylesheet" href="styles.scss"> <title>Film Finder</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <h1>Film Finder</h1> <form action="" id="searchForm"> <input type="text" placeholder="Find your film..." name="query"> <button id="searchBtn">Search</button> </form> <ul class="film-list"></ul> <script src="script.js"></script> </body>JAVASCRIPT
const form = document.querySelector('#searchForm'); form.addEventListener('submit', async function (e) { e.preventDefault(); const userInput = form.elements.query.value; const res = await axios.get(`https://swapi.dev/api/${userInput}`); const list = document.createElement('LI'); list.src = res.data.results; document.body.append(list); });Sigo recibiendo este error en la consola: script.js:9 Uncaught (en promesa) o {mensaje: 'Solicitud fallida con el código de estado 404', nombre: 'AxiosError', código: 'ERR_BAD_REQUEST', configuración: {…}, solicitud: XMLHttpRequest, …}
Entonces, la entrada del usuario en realidad se está capturando bien aquí. Si agrega el siguiente registro y envía el formulario, verá la entrada en la consola:
... const userInput = form.elements.query.value; console.log(userInput); El problema clave es cómo está construyendo la consulta API. Si lee los documentos de SWAPI (desplácese a la sección llamada búsqueda), verá cómo crear la URL de consulta si está buscando personas, por ejemplo. Esencialmente, tiene la URL construida de la siguiente manera rootUrl + resource + your search query .
Entonces, solo necesita modificar su solicitud de API a lo siguiente (si estaba buscando personas):
... const res = await axios.get(`https://swapi.dev/api/people/?search=${userInput}`);Todo lo demás está en el clavo. Los documentos de API no siempre son muy claros, por lo que el mejor consejo es llamar primero a algunos puntos finales fuera del HTML y ver qué obtienes. Simplemente codifique una cadena de búsqueda y registre el resultado. Si obtiene un error o datos que no esperaba, vuelva a los documentos y luego enjuague y repita.