Como llamar a una API desde Jquery

Jquery es una librería que nos ayuda a simplificar muchas funcionalidades que existen en Vanilla Javascript pero que son mas complicadas de implementar en esta última.

Uno de los componentes que mejor supo resolver Jquery fue AJAX (Asynchronous JavaScript And XML), el cual nos permite llamar a una url y obtener json o xml, osea una API.

Como instalo Jquery en mi proyecto?

Instalar Jquery es tan simple como incluir el script que apunta a la dependencia de la librería. Podemos encontrarlo en el sitio oficial. Ahora vamos a crear nuestro index.html, incluyendo dicha dependencia y debajo nuestro script:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery Demo</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

Es importante que nuestro script este al final de cualquier dependencia que vayamos a utilizar, estableciendo un orden jerárquico. Si queremos saber si Jquery esta funcionando, llamaremos a su evento document ready que ejecutará como callback un console.log() cuando el DOM este cargado por completo:

$( document ).ready(function() {
    console.log( "listo!" );
});

Usando SWAPI y Ajax

SWAPI es una API pública de StarWars. Vamos a hacer la llamada al endpoint /people con Ajax y luego imprimir la respuesta:

var request = $.ajax({
    url: "https://swapi.co/api/people/",
    method: "GET"
});request.done(function( data ) {
    console.log(data);
});
  
request.fail(function( error ) {
    console.log( 'Error: ' , error );
});

Guardamos la llamada de Ajax en una variable request, para luego poder llamar a sus métodos done (si el request fue ejecutado exitosamente) y fail (si el request falló).

Vamos a centrarnos en el callback del método done. El mismo nos devuelve un objeto data. Si nosotros usamos una app como Postman o introducimos la url en el navegador, nos va a devolver el siguiente json:

{
    "count": 87, 
    "next": "https://swapi.co/api/people/?page=2", 
    "previous": null, 
    "results": [
        {
            "name": "Luke Skywalker", 
            "height": "172", 
            "mass": "77", 
            "hair_color": "blond", 
            "skin_color": "fair", 
            "eye_color": "blue", 
            "birth_year": "19BBY", 
            "gender": "male", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/2/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/3/", 
                "https://swapi.co/api/films/1/", 
                "https://swapi.co/api/films/7/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [
                "https://swapi.co/api/vehicles/14/", 
                "https://swapi.co/api/vehicles/30/"
            ], 
            "starships": [
                "https://swapi.co/api/starships/12/", 
                "https://swapi.co/api/starships/22/"
            ], 
            "created": "2014-12-09T13:50:51.644000Z", 
            "edited": "2014-12-20T21:17:56.891000Z", 
            "url": "https://swapi.co/api/people/1/"
        }, 
        {
            "name": "C-3PO", 
            "height": "167", 
            "mass": "75", 
            "hair_color": "n/a", 
            "skin_color": "gold", 
            "eye_color": "yellow", 
            "birth_year": "112BBY", 
            "gender": "n/a", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/2/", 
                "https://swapi.co/api/films/5/", 
                "https://swapi.co/api/films/4/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/3/", 
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/2/"
            ], 
            "vehicles": [], 
            "starships": [], 
            "created": "2014-12-10T15:10:51.357000Z", 
            "edited": "2014-12-20T21:17:50.309000Z", 
            "url": "https://swapi.co/api/people/2/"
        }, 
        {
            "name": "R2-D2", 
            "height": "96", 
            "mass": "32", 
            "hair_color": "n/a", 
            "skin_color": "white, blue", 
            "eye_color": "red", 
            "birth_year": "33BBY", 
            "gender": "n/a", 
            "homeworld": "https://swapi.co/api/planets/8/", 
            "films": [
                "https://swapi.co/api/films/2/", 
                "https://swapi.co/api/films/5/", 
                "https://swapi.co/api/films/4/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/3/", 
                "https://swapi.co/api/films/1/", 
                "https://swapi.co/api/films/7/"
            ], 
            "species": [
                "https://swapi.co/api/species/2/"
            ], 
            "vehicles": [], 
            "starships": [], 
            "created": "2014-12-10T15:11:50.376000Z", 
            "edited": "2014-12-20T21:17:50.311000Z", 
            "url": "https://swapi.co/api/people/3/"
        }, 
        {
            "name": "Darth Vader", 
            "height": "202", 
            "mass": "136", 
            "hair_color": "none", 
            "skin_color": "white", 
            "eye_color": "yellow", 
            "birth_year": "41.9BBY", 
            "gender": "male", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/2/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/3/", 
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [], 
            "starships": [
                "https://swapi.co/api/starships/13/"
            ], 
            "created": "2014-12-10T15:18:20.704000Z", 
            "edited": "2014-12-20T21:17:50.313000Z", 
            "url": "https://swapi.co/api/people/4/"
        }, 
        {
            "name": "Leia Organa", 
            "height": "150", 
            "mass": "49", 
            "hair_color": "brown", 
            "skin_color": "light", 
            "eye_color": "brown", 
            "birth_year": "19BBY", 
            "gender": "female", 
            "homeworld": "https://swapi.co/api/planets/2/", 
            "films": [
                "https://swapi.co/api/films/2/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/3/", 
                "https://swapi.co/api/films/1/", 
                "https://swapi.co/api/films/7/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [
                "https://swapi.co/api/vehicles/30/"
            ], 
            "starships": [], 
            "created": "2014-12-10T15:20:09.791000Z", 
            "edited": "2014-12-20T21:17:50.315000Z", 
            "url": "https://swapi.co/api/people/5/"
        }, 
        {
            "name": "Owen Lars", 
            "height": "178", 
            "mass": "120", 
            "hair_color": "brown, grey", 
            "skin_color": "light", 
            "eye_color": "blue", 
            "birth_year": "52BBY", 
            "gender": "male", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/5/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [], 
            "starships": [], 
            "created": "2014-12-10T15:52:14.024000Z", 
            "edited": "2014-12-20T21:17:50.317000Z", 
            "url": "https://swapi.co/api/people/6/"
        }, 
        {
            "name": "Beru Whitesun lars", 
            "height": "165", 
            "mass": "75", 
            "hair_color": "brown", 
            "skin_color": "light", 
            "eye_color": "blue", 
            "birth_year": "47BBY", 
            "gender": "female", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/5/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [], 
            "starships": [], 
            "created": "2014-12-10T15:53:41.121000Z", 
            "edited": "2014-12-20T21:17:50.319000Z", 
            "url": "https://swapi.co/api/people/7/"
        }, 
        {
            "name": "R5-D4", 
            "height": "97", 
            "mass": "32", 
            "hair_color": "n/a", 
            "skin_color": "white, red", 
            "eye_color": "red", 
            "birth_year": "unknown", 
            "gender": "n/a", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/2/"
            ], 
            "vehicles": [], 
            "starships": [], 
            "created": "2014-12-10T15:57:50.959000Z", 
            "edited": "2014-12-20T21:17:50.321000Z", 
            "url": "https://swapi.co/api/people/8/"
        }, 
        {
            "name": "Biggs Darklighter", 
            "height": "183", 
            "mass": "84", 
            "hair_color": "black", 
            "skin_color": "light", 
            "eye_color": "brown", 
            "birth_year": "24BBY", 
            "gender": "male", 
            "homeworld": "https://swapi.co/api/planets/1/", 
            "films": [
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [], 
            "starships": [
                "https://swapi.co/api/starships/12/"
            ], 
            "created": "2014-12-10T15:59:50.509000Z", 
            "edited": "2014-12-20T21:17:50.323000Z", 
            "url": "https://swapi.co/api/people/9/"
        }, 
        {
            "name": "Obi-Wan Kenobi", 
            "height": "182", 
            "mass": "77", 
            "hair_color": "auburn, white", 
            "skin_color": "fair", 
            "eye_color": "blue-gray", 
            "birth_year": "57BBY", 
            "gender": "male", 
            "homeworld": "https://swapi.co/api/planets/20/", 
            "films": [
                "https://swapi.co/api/films/2/", 
                "https://swapi.co/api/films/5/", 
                "https://swapi.co/api/films/4/", 
                "https://swapi.co/api/films/6/", 
                "https://swapi.co/api/films/3/", 
                "https://swapi.co/api/films/1/"
            ], 
            "species": [
                "https://swapi.co/api/species/1/"
            ], 
            "vehicles": [
                "https://swapi.co/api/vehicles/38/"
            ], 
            "starships": [
                "https://swapi.co/api/starships/48/", 
                "https://swapi.co/api/starships/59/", 
                "https://swapi.co/api/starships/64/", 
                "https://swapi.co/api/starships/65/", 
                "https://swapi.co/api/starships/74/"
            ], 
            "created": "2014-12-10T16:16:29.192000Z", 
            "edited": "2014-12-20T21:17:50.325000Z", 
            "url": "https://swapi.co/api/people/10/"
        }
    ]
}

Cuando usamos Ajax, el parseo de json a objeto javascript lo hace automáticamente y de un modo encapsulado. Esto significa que nuestro objeto data va a contener todos los atributos del json sin que necesitemos hacer un JSON.parse().

Para acceder a los datos del json mediante data, les dejo algunos ejemplos:

data.count // Accedemos a la cantidad de personas, en este caso un number de 87
data.next // Accedemos al siguiente endpoint que nos llevará a otras 10 personas
data.results // Es la lista de personas
data.results[0] // Apuntamos a la primer persona
data.results[0].name // Apuntamos al nombre de la primer persona, en este caso Luke Skywalker
data.results[0].vehicles // Obtenemos la lista de vehiculos utilizados por Luke

Entonces por ejemplo si quisieramos devolver la lista de nombres de personas, solo debemos iterar el array de resultados:

request.done(function( data ) {
    for(var i = 0; i < data.results.length; i++){
        console.log(data.results[i].name);
    }
});

Espero que este artículo les haya sido muy útil, y nos vemos en el próximo!

Happy Coding 😀

¡Deja un comentario!

Artículos relacionados

Cómo Migrar WordPress y Woocommerce con Azure

Las migraciones en WordPress siempre fueron un tema difícil de tratar. Las guías se centran en los backups locales pero no tanto en las restauraciones del lado del servidor. Los plugins en general tampoco ayudan demasiado: Apenas instalamos alguno, el backup es gratuito, pero la migración requiere un servicio premium. Por eso decidí armar esta guía, para resolver el dilema de una sola vez. Aclaro que si bien vamos a trabajar con Azure del lado del servidor, se puede hacer con cualquier otro VPS o Hosting siempre y cunado este nos permita una instalación previa de WordPress.

Mi experiencia con WordPress

Mi 2020 arrancó de una manera muy intensa. Debido a que me eligieron para preparar un programa académico de esta tecnología, reforcé mis conocimientos actuales y me introduje de lleno en nuevos e interesantes conceptos que trae esta plataforma de blogging y un poco más.

La Senda del Desarrollador Full Stack

Uno de los tópicos que más me consultan como profesor es “¿por dónde debería empezar?”. Hay muchas tecnologías y una demanda laboral muy alta que incrementó potencialmente estos últimos años. Por eso decidí crear esta guía que va a aplanar el camino a todo el que se inicie como desarrollador en este mismo instante. También reforzará a los experimentados.

Como popular una tabla en base a un servicio con Jquery

La idea es crear una tabla donde tengamos la lista de personajes de StarWars (obtenido con SWAPI) y podamos eliminar uno a uno. Lo primero que vamos a hacer es crear nuestro html e incluirle Bootstrap (Framework de maquetado) y Jquery