Cómo Crear un Dashboard del Ranking WTA con JavaScript usando Tennis API y RapidAPI

Si estás desarrollando aplicaciones deportivas, una de las formas más sencillas de obtener datos actualizados de tenis es utilizando la API de Tennis API disponible a través de RapidAPI.

En este tutorial mostraré cómo crear un dashboard interactivo del Ranking WTA utilizando HTML, CSS y JavaScript. Los datos son proporcionados por Tennis API, una plataforma especializada en estadísticas, rankings, resultados y datos en tiempo real para ATP, WTA e ITF.

¿Qué es Tennis API?

tennis-api.com ofrece acceso a:

• Ranking ATP y WTA.
• Resultados en vivo.
• Calendario de torneos.
• Estadísticas de jugadores.
• Datos punto por punto mediante WebSocket.
• Cuotas deportivas en tiempo real.

La API también puede consumirse desde rapidapi.com, lo que facilita las pruebas y la integración en proyectos JavaScript, Python, PHP y otros lenguajes.

Resultado Final

El dashboard desarrollado permite:

• Consultar el ranking WTA actualizado.
• Buscar jugadoras por nombre.
• Mostrar el Top 3 mundial.
• Consultar perfiles detallados de cada tenista.
• Acceder a información adicional mediante Wikidata.

Puedes probar la demo aquí:

Dashboard-wta-rancking-tennis.html

Consumir el Endpoint del Ranking WTA

Para obtener el ranking utilizamos el endpoint de Tennis API disponible en RapidAPI.

const response = await fetch(
"https://tennis-api-atp-wta-itf.p.rapidapi.com/tennis/v2/wta/ranking/singles",
{
headers:{
"X-RapidAPI-Key":API_KEY,
"X-RapidAPI-Host":"tennis-api-atp-wta-itf.p.rapidapi.com"
}
}
);

La respuesta contiene cientos de jugadoras junto con información como posición, país, puntos acumulados e identificadores adicionales.

Construyendo el Dashboard

Una vez obtenidos los datos, utilizamos JavaScript para:

• Mostrar el Top 3 del ranking.
• Generar dinámicamente la tabla de clasificación.
• Implementar un buscador en tiempo real.
• Consultar perfiles individuales mediante un segundo endpoint.

Este enfoque permite crear aplicaciones deportivas modernas sin necesidad de mantener una base de datos propia.

Consultar el Perfil de una Jugadora

Cuando el usuario selecciona una jugadora, el dashboard realiza una segunda consulta:

https://tennis-api-atp-wta-itf.p.rapidapi.com/tennis/v2/wta/player/profile/${playerId}

Este endpoint devuelve información adicional como ranking actual, fecha de nacimiento, altura, entrenador, residencia y enlaces externos.

Conclusión

Gracias a Tennis API y RapidAPI es posible desarrollar dashboards deportivos completos utilizando únicamente HTML, CSS y JavaScript. Con unos pocos endpoints podemos construir aplicaciones para rankings ATP, rankings WTA, resultados en vivo, estadísticas y seguimiento de jugadores profesionales.