jQuery y APIs: trabajar con JSON y renderizar datos dinámicos

Una de las aplicaciones más comunes de AJAX es consultar una API y mostrar sus datos en la interfaz.

JSON y objetos JavaScript

Muchas APIs responden con JSON. jQuery puede interpretar automáticamente esa respuesta y entregarnos objetos o arrays de JavaScript.

¿Qué es una API?

Una API (Application Programming Interface, o interfaz de programación de aplicaciones) es una forma estandarizada para que dos sistemas puedan comunicarse entre sí.

Desde una página web podemos enviar una petición a una API y recibir información para utilizarla en nuestra aplicación. En aplicaciones web modernas, esos datos suelen llegar en formato JSON.

Nuestra página
      ↓
GET /usuarios
      ↓
API
      ↓
JSON
      ↓
jQuery procesa los datos
      ↓
Mostramos los usuarios en el HTML

Ejemplos de APIs reales

Existen miles de APIs disponibles en Internet. Algunas son públicas y otras requieren registrarse o utilizar una clave de acceso.

• GitHub API: permite consultar usuarios, repositorios, issues, commits y otros datos de GitHub.
• OpenWeather API: permite consultar información meteorológica, como temperatura y condiciones del clima. Generalmente requiere una API key.
• REST Countries: permite consultar información de países, capitales, monedas, idiomas y banderas.
• JSONPlaceholder: es una API pensada para practicar. Ofrece datos ficticios de usuarios, publicaciones, comentarios y tareas.

Importante: no todas las APIs son completamente abiertas. Algunas requieren autenticación, API keys, tienen límites de uso o aplican restricciones de seguridad como CORS.

Consultar una API

$.get("https://jsonplaceholder.typicode.com/users")
    .done(function (usuarios) {
        console.log(usuarios);
    });

Renderizar resultados

$.get("https://jsonplaceholder.typicode.com/users")
    .done(function (usuarios) {

        $("#usuarios").empty();

        usuarios.forEach(function (usuario) {
            $("#usuarios").append(
                "<li>" + usuario.name + "</li>"
            );
        });

    });

empty() limpia el contenido anterior y append() agrega cada nuevo elemento.

Evitar insertar HTML no confiable

Si los datos vienen de usuarios o fuentes externas, es mejor evitar construir HTML directamente con texto sin controlar.

$.get("/api/usuarios")
    .done(function (usuarios) {

        const lista = $("#usuarios");

        lista.empty();

        usuarios.forEach(function (usuario) {
            $("<li>")
                .text(usuario.name)
                .appendTo(lista);
        });

    });

.text() trata el contenido como texto en lugar de interpretarlo como HTML.

dataType

Podemos indicar explícitamente que esperamos JSON:

$.ajax({
    url: "/api/usuarios",
    method: "GET",
    dataType: "json"
});

Enviar JSON

$.ajax({
    url: "/api/tareas",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({
        titulo: "Practicar AJAX"
    })
})
.done(function (tarea) {
    console.log(tarea);
});

Estado de carga y errores

$("#estado").text("Cargando...");

$.get("/api/usuarios")
    .done(function (usuarios) {
        $("#estado").text(
            usuarios.length + " usuarios encontrados"
        );
    })
    .fail(function () {
        $("#estado").text(
            "No se pudieron cargar los usuarios"
        );
    });

Ejercicio

Consumí una API pública de publicaciones y mostrá título y contenido de cada resultado dentro de tarjetas creadas dinámicamente.

Errores comunes

• suponer una estructura JSON sin revisarla;
• concatenar HTML con datos no confiables;
• no limpiar resultados anteriores;
• no mostrar estados de carga o error;
• confundir JSON con un objeto JavaScript aunque estén relacionados.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← AJAX con jQuery: $.ajax(), $.get() y $.post() paso a paso

Proyecto final jQuery: aplicación de tareas con DOM, filtros y AJAX →