Usando fetch para obtener una API: ejemplo de la API de Star Wars

Translator

 En la próxima lección, vamos a conectarnos a la API de Star Wars. Así que te mostraré cómo puedes hacer una conexión y luego también interactuar con los resultados. Hay varias opciones diferentes que estarán disponibles en el menú desplegable. Puedes obtener los resultados de las películas, personas o planetas. Esto te dará una idea general del número de elementos contenidos dentro de las películas, o puedes obtener los diversos planetas mencionados dentro de la API de Star Wars. Eso es todo lo que viene en esta lección.

A la izquierda, este es Visual Studio Code. Tengo una página HTML básica vinculada a un archivo JavaScript, y actualmente el archivo JavaScript está en blanco, y eso es lo que vamos a cubrir en esta lección. En el lado derecho, tengo abierto el navegador web en la página HTML, así que está usando Live Server desde Visual Studio Code. También tengo abierta la consola de herramientas de desarrollo en la parte inferior.

Así que adelante, vamos a seleccionar el botón, así como el elemento de clase `output`. Esto nos permitirá interactuar con los elementos usando código JavaScript, y simplemente vamos a hacer una selección con `querySelector`, seleccionando el elemento con la etiqueta de botón. Esto devolverá el primer elemento coincidente dentro de la selección, y también usaremos `querySelector` para seleccionar el área de salida, para que podamos mostrar y devolver información al usuario cuando se realice la conexión.

Así que vamos a agregar un escuchador de eventos al botón. El evento que vamos a agregar será un evento de clic, y el clic activará una función anónima. Así que haremos esto simplemente dentro del clic. Entonces, cada vez que se haga clic en el botón, lo que queremos hacer es realizar una conexión. Así que nos vamos a conectar a una URL. La URL a la que nos vamos a conectar va a ser esta aquí. Va a estar disponible en `swapi.dev/api/`. Esta es la API de Star Wars, y te proporciona una API popular y muy interesante con la que puedes jugar e interactuar para familiarizarte más con la realización de conexiones a una API. Y la función que vamos a usar para realizar la conexión será `fetch`.

Cuando se haga clic en el botón, invocaremos la función `fetch`, que buscará en una URL y luego devolverá promesas. Una vez que obtengamos una respuesta, la respuesta vendrá en formato JSON. Así que podemos establecerla como datos JSON, y eso es lo que estará devolviendo. Y una vez que tengamos la respuesta, vendrá como un objeto de datos, y ese objeto de datos... por ahora, lo que vamos a hacer es simplemente mostrarlo en la consola. Usando `console.log`, mostremos los datos en la consola. Entonces, cuando se haga clic en el botón, se conectará a la URL y devolverá todos esos datos hasta abajo.

También vamos a crear una API un poco más interactiva. Vamos a crear algunos elementos en la página, y estos se filtrarán en las diversas películas, personas, especies, naves estelares y planetas. Así que devolverá información mucho más robusta. Lo vamos a añadir a la salida y también vamos a actualizar lo que vamos a seleccionar para el botón.

Entonces, una vez que se haga clic en el botón, creemos un `select`. Va a estar bajo la opción "film". Y también queremos proporcionar una opción para seleccionar personas. Y ahí está nuestro menú desplegable, así que podemos seleccionar varios valores y luego realizar las conexiones. Conectándonos a la API básica, agreguemos las otras opciones. Además de esto, podemos recorrer y obtener de vuelta películas, personas, planetas, especies, naves estelares y vehículos, y hacerlo un poco más interactivo donde podamos seleccionar todos los elementos de opción. Por ahora, solo seleccionaremos algunos valores del `select`. Solo llamaré a esto un valor seleccionado, usando `document.querySelector`.

Adelante, y vamos a seleccionar el valor para el elemento `select`. Por ahora, simplemente mostraremos el valor en la consola con `console.log`. Tomando ese objeto `select` y devolviendo el valor de selección actual. Veamos qué obtenemos. Así es como estamos obteniendo esos valores de planetas y personas.

¿Qué tal si agregamos la selección de la API? Se va a añadir a la URL. Será una barra inclinada hacia adelante allí. Y aquí podemos hacer el valor seleccionado. Ahora va a devolver la siguiente categoría seleccionada y la devolverá a la API. Tenemos seis elementos allí, y una vez que tengamos los valores dentro de los resultados, entonces podemos enumerar esos valores.

Ahora actualicemos lo que estamos mostrando en el área de salida. Llamaremos a una función llamada `output`. Va a tomar un valor, que será el valor devuelto dentro de los datos que están siendo devueltos. Queremos recorrer el resultado, y también vamos a pasar el valor seleccionado. Será un segundo valor. Así que va a tener... y lo nombraremos igual. Tendremos datos y un valor. Y aquí podemos construir la salida que tenemos, además de obtener el valor de los resultados. Obtengamos el arreglo de resultados, y estará contenido dentro de `data.results`. Estamos devolviendo un total, y este será el arreglo de resultados. Podemos recorrer cada uno de ellos, seleccionando los elementos. El total debe ser un arreglo, y seleccionaremos el elemento. Luego podemos mostrar los resultados allí usando el título y la información adicional.

Seleccionando la salida y actualizando el `innerHTML`, escribiremos el texto de búsqueda. Y seleccionando una búsqueda para... y luego el signo de dólar, las llaves que indicarán el valor que se estaba buscando. Y mientras producimos cada uno de ellos, un `div` separado en la página y lo que tengamos dentro de ese elemento. Entonces, lo que esto hará es que cuando se haga clic en el botón y se muestre la salida, también vamos a deshabilitar el botón y establecerlo en `true`, para que no pueda ser clicado más de una vez. Y dentro de la salida, el `innerHTML`. Simplemente escribiremos "buscando" para que el usuario tenga algo de retroalimentación sobre lo que está sucediendo actualmente.

Hacemos la conexión. Está buscando, deshabilita el botón, y por ahora no está mostrando todos los valores, sino que los está poniendo en la consola. Así que hagámoslo. Seguiremos mostrando los valores en la consola, y queremos añadirlos al `innerHTML`. Intentémoslo una vez más. Ahora está buscando y luego devuelve los resultados del título dentro de los resultados. Tenemos el título allí y el primer elemento del arreglo. También hay algunas API adicionales a las que puedes ir. Por ahora, solo te está dando las películas, y necesitamos volver a habilitar. Seleccionemos el botón y establezcamos `disabled` en `false`. Probémoslo una vez más, donde estamos buscando personas. Y ahora está volviendo como indefinido. La razón de esto es que las personas están buscando un nombre en lugar de un título. Así que tendremos que hacer algunas actualizaciones, donde aquí estamos seleccionando el título, pero en realidad debería ser un nombre.

Así que hagamos una selección de eso, donde vamos a tener un arreglo de valores. Queremos seleccionar el nombre y veamos qué tienen los planetas, así que ese estará bajo "nombre", y luego los planetas mismos tendrán los resultados. Y eso también estará bajo nuestro "nombre", así que podemos verificar y aplicar una condición. Usemos un operador ternario. Busquemos el nombre del elemento y verifiquemos si el valor es igual a, y si el valor es igual a "películas". Esto debería buscar la cadena "películas". Si devuelve "películas", usará el título. Y si devuelve "personas" o "planetas", usará el nombre. Esto nos permite mostrar todos estos valores directamente en la página.