👉 Cómo consumir una API con JavaScript (Ejemplo real con Dragon Ball)

Cómo usar la API de Dragon Ball para aprender a consumir APIs (Ejemplo real en JavaScript)

Si estás aprendiendo a trabajar con APIs, probablemente ya viste ejemplos aburridos sobre usuarios o productos.

Pero… ¿qué tal aprender usando personajes de Dragon Ball?

En esta guía paso a paso vamos a utilizar la Dragon Ball API para obtener información de tus personajes favoritos y mostrarla en tiempo real con JavaScript y fetch. Es un ejercicio ideal si estás comenzando en el mundo del desarrollo web.

Ejemplo de Dragon Ball API con JavaScript (Fetch paso a paso)

A continuación verás un ejemplo completo de cómo consumir la Dragon Ball API usando JavaScript y fetch. Este ejemplo es ideal si estás buscando cómo trabajar con APIs REST en proyectos reales.


fetch("https://dragonball-api.com/api/characters?name=goku")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Este código realiza una petición HTTP a la API y devuelve información en formato JSON que puedes utilizar en tu aplicación.

🚀 ¿Qué vas a aprender en este tutorial?

Qué es una API y para qué sirve
Cómo hacer una petición con fetch
Cómo leer datos en formato JSON
Mostrar información dinámica en una página
Crear una mini app interactiva

Además, usar ejemplos divertidos hace que el aprendizaje sea más rápido y fácil de recordar.

¿Qué es la Dragon Ball API y cómo funciona?

La Dragon Ball API es un servicio gratuito que proporciona datos sobre la serie, incluyendo personajes, episodios, ataques y planetas.

Puedes revisar la documentación oficial aquí:

👉 Ver documentación de la API

🛠️ Tecnologías utilizadas

HTML → estructura de la página
JavaScript → lógica de la aplicación
Fetch API → obtención de datos

Paso 1: Preparando el HTML

Crearemos un combobox para seleccionar un personaje y un área donde se mostrará la información automáticamente.

Cómo consumir la Dragon Ball API con JavaScript (fetch)

La función obtenerPersonajeInfo(personaje) hace la petición a la API usando el nombre seleccionado.


function obtenerPersonajeInfo(personaje) {
    try {
        const url = `https://dragonball-api.com/api/characters?name=${personaje.toLowerCase()}`;
        const respuesta = await fetch(url);
        const datos = await respuesta.json();

Construimos la URL
Usamos fetch para obtener los datos
Convertimos la respuesta a JSON
Mostramos la información en pantalla

Mostrar la información del personaje


function mostrarInformacionPersonaje(info) {
    const infoDiv = document.getElementById('personaje-info');
    const imagen = info.image || info.image_url || 'https://via.placeholder.com/300';

    infoDiv.innerHTML = `
        <h2>${info.name}</h2>
        <p><strong>Raza:</strong> ${info.race || 'Desconocida'}</p>
        <p><strong>Poder:</strong> ${info.power || 'Desconocido'}</p>
        <p><strong>Descripción:</strong> ${info.description || 'No disponible'}</p>
        <img src="${imagen}" style="width:300px;height:auto;" />
    `;
}

Probar el código

Guarda el archivo con extensión .html y ábrelo en tu navegador.

Verás un selector de personajes que cargará la información automáticamente.

👉 Ver ejemplo funcionando

💡 ¿Por qué practicar con APIs divertidas?

Aprender con proyectos interesantes mejora la retención y hace que la programación sea menos frustrante.

Cuando combinas tecnología con algo que te gusta, es más probable que continúes aprendiendo.

🔥 Mas APIs gratuitas para seguir practicando

Explorar distintas APIs te ayudará a convertirte en un desarrollador más versátil.

🚀 ¿Para qué puedes usar esta API?

Crear un dashboard con personajes

Practicar consumo de APIs REST

Integrarla en un proyecto con React o Excel

Simular integraciones reales antes de trabajar con APIs empresariales

Conclusión

Con este ejemplo ya puedes empezar a trabajar con la Dragon Ball API y construir aplicaciones interactivas.

Este ejercicio es perfecto para mejorar tus habilidades en JavaScript y entender cómo funcionan las peticiones a servicios externos.

Si quieres seguir aprendiendo sobre macros, automatización y programación práctica, te recomiendo explorar otros artículos del blog.

TIP PRO: intenta modificar el ejemplo para filtrar personajes por raza o planeta 😉

👉 Análisis de ayuda internacional con Python: dataset OECD + notebook listo para usar