Hoy dia una de las tareas mas habituales en una web es cargar datos desde algún api, tradicionalmente muchos desarrolladores lo hacían con JQuery gracias a lo sencillo que es realizarlas con dicha librería entre muchas otras cosas, sin embargo hay casos no se utiliza JQuery para nada más y no es muy eficiente cargar una librería completa solamente para hacer peticiones
¿Que alternativas tenemos? La alternativa mas simple es crear una funcion JavaScript que haga uso de una Promesa y XMLHttpRequest para realizar la petición HTTP, vamos como hacerlo:
Lo primero que debemos escribir una función para realizar la petición a la que llamaremos get_json y que será genérica y sirve para realizar una petición y devolver cualquier JSON como un objeto iterable, es decir ya parseado como JSON para que podamos recorrerlo y acceder a los datos como si fuera un array y no como un mero String:
const get_json = (url) =>; { return new Promise((resolve,reject) => { const xhttp = new XMLHttpRequest(); xhttp.open('GET',url,true); xhttp.onreadystatechange = (() => { if (xhttp.readyState===4){ (xhttp.status === 200) ? resolve(JSON.parse(xhttp.responseText)) : reject(new Error('Error ',url)) } }); xhttp.send(); }); }
La segunda función que debemos definir es específica para el JSON
const load_data = async (url_api) => { try { const data = await get_json(url_api); //Aqui en la variable data ya tenemos el json completo //listo para realizar la tarea que queramos hacer. } catch (error) { console.error(error); } }
Por último llamamos a la función pasándole la url del api, para hacerlo a modo de prueba usaremos el API de rickandmortyapi.com:
load_data('https://rickandmortyapi.com/api/character/')
A modo de ejemplo, al obtener el JSON vamos a recorrer y realizar una segunda petición para traernos el nombre del personaje, para eso realizamos un bucle for y luego llamamos nuevamente con la función get_json al endpoint del personaje mediante el id obtenido en la primera llamada.
const load_data = async (url_api) =>; { try { const data = await get_json(url_api); var count = Object.keys(data.results).length; for(i=0; i < count; i++) { let character = await get_json(`${url_api}${data.results[i].id}`); console.log(character.name) } } catch (error) { console.error(error); } }
Como vemos, es sumamente sencillo y sin la necesidad de agregar ninguna librería externa, si quieres realizar mas pruebas con esta api puedes revisar la documentación [aqui].
Administrador de Sistemas, Programador, Docente y ahora resulta que también Blogger (peor es ser tictoker). Más de 20 años de experiencia en computación atendiendo nabos y resolviendo problemas que sino fuera por estos nabos no habrían ocurrido en primer lugar. Escribo más que nada sobre tecnología y herramientas en general además de algunos artículos con opiniones tan subjetivas como irrelevantes, así que si no te gustan mejor madura.