Cómo Usar la API de Dragon Ball en JavaScript: Selecciona tu Personaje Favorito

En esta publicación, vamos a aprender a utilizar la Dragon Ball API para obtener información sobre tus personajes favoritos de la serie. Usaremos un ejemplo en JavaScript y fetch que permite al usuario seleccionar un personaje de Dragon Ball desde un combobox y mostrar los detalles en tiempo real.

La API de Dragon Ball ofrece información sobre personajes y planetas.

¿Qué es la Dragon Ball API?

La Dragon Ball API es un servicio gratuito que proporciona datos sobre la serie, incluyendo personajes, episodios, ataques y más. Puedes encontrar la documentación completa de la API aquí.

En este ejemplo, usaremos la sección de personajes, donde podrás buscar y mostrar información como el nombre, el poder y la raza de los personajes.

Paso 1: Preparando el HTML

Comenzamos con la estructura HTML básica que tendrá un combobox para seleccionar un personaje y un área para mostrar la información.

Paso 2: Haciendo la Llamada a la API en JavaScript

🛠️ Tecnologías utilizadas

HTML → Para la estructura de la página.
JavaScript → Para hacer la petición a la API y mostrar los datos.
Fetch API → Para obtener los datos desde la API de Dragon Ball.

Explicación del Código:

La página contiene:

Un combobox (<select>) donde el usuario seleccionará un personaje.
Un div (<div id="personaje-info">) donde se mostrará la información del personaje seleccionado.
Función obtenerPersonajeInfo(personaje)

Esta función hace la petición a la API con el nombre del personaje 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();

Se construye la URL con el nombre del personaje en minúsculas (.toLowerCase() para evitar errores).
Se usa fetch(url) para obtener los datos desde la API.
Se convierte la respuesta en formato JSON con await respuesta.json().
Si la API devuelve un personaje válido, se muestra en la página.Función mostrarInformacionPersonaje(info)
Cuando la API devuelve la información, se muestra en el div correspondiente

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}" alt="${info.name}" style="width:300px;height:auto;" />
    `;
}

Paso 3: Probar el Código

Una vez que hayas copiado y pegado el código puede ser en un bloc de notas y lo guardas con extensión HTML, abre el archivo HTML en tu navegador. Verás un combobox con una lista de personajes. Al seleccionar uno, se mostrará la información detallada sobre él, te comparto como se ve mi página

https://www.programacionparatodos.com/p/pagina-ejemplo-para-llamar-api-de.html

Te dejo el código aquí

<!DOCTYPE html>

<head>

<title>Dragon Ball - Selecciona un Personaje</title>

</head>

<body>

<h1>Selecciona tu Personaje de Dragon Ball</h1>

<option value="">Selecciona un personaje...</option>

<option value="Vegeta">Vegeta</option>

<option value="Piccolo">Piccolo</option>

<option value="Bulma">Bulma</option>

<option value="Freezer">Freezer</option>

<option value="Gohan">Gohan</option>

<option value="Gotenks">Gotenks</option>

<option value="Trunks">Trunks</option>

</select>

</div>

// Función para llamar a la API y obtener la información del personaje seleccionado

async function obtenerPersonajeInfo(personaje) {

try {

// URL de la API de Dragon Ball con el parámetro de nombre

const url = `https://dragonball-api.com/api/characters?name=${personaje.toLowerCase()}`;

const respuesta = await fetch(url);

const datos = await respuesta.json();

// Comprobamos si hay datos disponibles para el personaje

if (datos && datos[0]) {

const info = datos[0];

mostrarInformacionPersonaje(info);

} else {

mostrarError('Personaje no encontrado o datos no disponibles.');

}

} catch (error) {

console.error('Error al obtener datos de la API:', error);

mostrarError('Hubo un error al cargar la información.');

}

// Función para mostrar la información del personaje

function mostrarInformacionPersonaje(info) {

const infoDiv = document.getElementById('personaje-info');

// Verificar si la URL de la imagen existe, si no mostrar una imagen predeterminada

const imagen = info.image || info.image_url || 'https://blogger.googleusercontent.com/.powerpoint.jpg'; // Imagen por defecto en caso de error

infoDiv.innerHTML = `

<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>

}

// Función para mostrar un mensaje de error

function mostrarError(mensaje) {

const infoDiv = document.getElementById('personaje-info');

infoDiv.innerHTML = `<p style="color:red;">${mensaje}</p>`;

}

// Escuchar cambios en el combobox

document.getElementById('personaje-select').addEventListener('change', (event) => {

const personajeSeleccionado = event.target.value;

if (personajeSeleccionado) {

obtenerPersonajeInfo(personajeSeleccionado);

} else {

document.getElementById('personaje-info').innerHTML = ''; // Limpiar la sección si no se selecciona nada

}

});

</script>

</body>

</html>

Conclusión

Con este sencillo ejemplo, puedes empezar a trabajar con la Dragon Ball API y crear aplicaciones interactivas basadas en la famosa serie.

Recuerda que la API de Dragon Ball es un recurso divertido para explorar si eres fan de la serie, y esta integración en JavaScript es solo una de las muchas formas de interactuar con ella.

Puedes ajustar el ejemplo a tus necesidades, en lugar de filtrar por Personaje, puedes filtrar por raza

Programación para todos