Como leer una API JSON con XMLHttpRequest
Obtener información de una API para mostrarla en tus aplicaciones es una de las tareas que como programador no puedes dejar de aprender.
En este artículo vas a ver como leer un API JSON usando JavaScript puro y XMLHttpRequest.
XMLHttpRequest es un objeto nativo del navegador que permite hacer solicitudes HTTP desde JavaScript.
A modo pruebas, usaré la API JSON Placeholder, una API gratuita para hacer pruebas y prototipos.
Como siempre, te ilustraré todo en base a un ejemplo en funcionamiento.
En este ejemplo he decidido depositar en el cuerpo de mi página un contenedor vacío que usaré para incorporar los contenidos que retorne la llamada a la API.
Contenedor HTML
Dentro del <body> o cuerpo de la página voy a agregar el contenedor de resultados vacío.
Llamada XMLHttpRequest
Luego, en archivo JavaScript independiente, agrego la llamada XMLHttpRequest de la siguiente manera:
const request = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';
request.open("GET", url);
request.send();
request.onreadystatechange = (e) => {
if (request.readyState == 4 && request.status == 200) {
const posts = JSON.parse(request.responseText);
let html = '<div class="posts">';
posts.forEach(function(post, index) {
console.log(`${index} : ${post.title}`);
html += `<div class="post card">
<div class="card-header">${post.title}</div>
<div class="card-body">${post.body}</div>
</div>`;
});
html += '</div>';
document.querySelector('.response').innerHTML = html;
}
}En este caso, en la constante request estoy creando una instancia del objeto nativo del navegador XMLHttpRequest.
Creo otra constante llamada url para guardar en ella la url que usaré como fuente de datos en formato JSON.
Mediante el método GET, abro y envío una solicitud a la url indicada.
A continuación, uso el evento «onreadystatechange» para ejecutar el código de respuesta al cliente cuando la solicitud esté lista.
Cuando la solicitud ha finalizado y la respuesta es positiva, con responseText recupero la información para convertir el formato JSON en array.
A la vez que creo una variable html para guardar el código HTML del resultado, recorro el array para capturar cada elemento de la API y sacar los atributos de su información individualmente para crear la estructura HTML que necesito con el objetivo de mostrarlo en el formato deseado.
En el siguiente enlace puedes ver que atributos o valores tiene cada elemento en la API:
https://jsonplaceholder.typicode.com/posts
Finalmente, el contenido de la variable html que he rellenado dinámicamente la deposito en mi contenedor de respuesta que tengo vacío en el cuerpo de la página.
Conclusiones
Bastante más fácil de lo que pensabas, ¿verdad?
En este punto, me gustaría hacerte saber que XMLHttpRequest es un objeto antiguo que está quedando obsoleto pero todavía se usa porque tiene algunas características que los métodos modernos para hacer este tipo de llamadas todavía no tienen.
Algunas de las características más especiales que solo tiene este objeto son el hecho de tener que soportar scripts existentes que usan todavía XMLHttpRequest, el soporte a navegadores antiguos y el rastreo del progreso de la subida de archivos que es muy útil para el programador hoy en día ya que simplifica mucho el código de progreso.
En una próxima entrada me gustaría hacerte saber todo sobre XMLHttpRequest. Estate al tanto y no te lo pierdas.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Como leer una API JSON con XMLHttpRequest”
Deja una respuesta
Ver más sobre
y como podria ordenar mostrar una imagen segun el codighgo json.
por ejemplo este es mi json:
{
«name»: «Magikarp»,
«eggType»: «2 km»,
«isAdventureSync»: false,
«image»: «/pokemon_icon_129_00.png»,
«canBeShiny»: true,
«combatPower»: {
«min»: 132,
«max»: 157
},
«isRegional»: false
},
me gustaria mostrar una imagen segun el resultado de: «canBeShiny»: true o false.
aqui dejo mi codigo:
request.onreadystatechange = (e) => {
if (request.readyState == 4 && request.status == 200) {
const posts = JSON.parse(request.responseText);
let html = »;
posts.forEach(function(post, index) {
console.log(`${index} : ${post.name}`);
html += `
${post.name}
CP ${post.combatPower.min} – ${post.combatPower.max}
`;
});
html += »;
document.querySelector(‘.response’).innerHTML = html;
}
}
gracias de entemano.
saludos