👉 Aprende a usar una API de Fórmula 1 con JavaScript | Tutorial paso a paso

🏎️ Cómo usar una API de Fórmula 1 con JavaScript (Ranking de pilotos en tiempo real)

Si eres fan de la Fórmula 1 y además te gusta programar, este tutorial te encantará. En lugar de buscar los resultados de cada carrera en distintas páginas, ¿por qué no crear tu propia aplicación para consultar el ranking de pilotos en tiempo real?

En esta guía aprenderás cómo consumir una API de Fórmula 1 usando JavaScript, obtener datos en formato JSON y mostrarlos en tu propia página web. Este es un ejercicio perfecto si estás comenzando en el mundo de las APIs o quieres practicar integraciones reales.

---

Ejemplo de API de Fórmula 1 con JavaScript (fetch paso a paso)

Este es un ejemplo práctico de cómo consumir una API de Fórmula 1 con JavaScript usando fetch. Obtendremos el ranking de pilotos en tiempo real en formato JSON.

fetch("https://api.jolpi.ca/ergast/f1/current/driverStandings.json")
  .then(res => res.json())
  .then(data => {
    console.log(data.MRData.StandingsTable.StandingsLists[0].DriverStandings);
  });

Con este código puedes obtener posiciones, puntos y datos8 de pilotos de la temporada actual.

📌 ¿Qué es una API? (Explicado fácil)

Una API es un puente que permite que dos aplicaciones se comuniquen entre sí.

Imagina que vas a un supermercado y quieres saber el precio de un producto. Usas el escáner — ese escáner sería la API. Tu aplicación hace la solicitud y el servidor responde con la información.

La mayoría de las APIs modernas devuelven datos en formato JSON, ideal para trabajar con JavaScript.

---

🔎 Paso 1: Encontrar una API de Fórmula 1

Para este ejemplo utilizaremos una API disponible en RapidAPI:

👉 https://rapidapi.com/api-sports/api/api-formula-1/details

Antes de integrarla debemos entender:

• Qué datos debemos enviar
• Qué datos recibiremos
• En qué formato llegará la respuesta

En este caso obtendremos el ranking de pilotos de una temporada.

---

💻 Ejemplo de código para consumir la API de F1 en JavaScript

El siguiente ejemplo usa XMLHttpRequest para obtener el ranking de la temporada.

Al ejecutar este código recibirás una respuesta en formato JSON con toda la información de pilotos.

---

🌐 Prueba la página funcionando

Puedes ver el ejemplo en vivo aquí:

👉 https://www.programacionparatodos.com/p/api-de-f1-racking-drivers.html

---

🎥 Video explicación paso a paso

---

⚠️ Actualización: usar Fetch en lugar de XMLHttpRequest

Algunas APIs modernas pueden generar errores de tipo CORS cuando se usan con XMLHttpRequest. Por ello, es recomendable utilizar Fetch API, que es el estándar actual en JavaScript.

Aquí tienes una versión actualizada:

https://www.programacionparatodos.com/p/dashboard-formula1-f1.html

---

🚀 ¿Por qué aprender a usar APIs?

Saber consumir APIs es una de las habilidades más valiosas hoy en día. Te permite:

• Crear aplicaciones dinámicas
• Conectar servicios externos
• Automatizar procesos
• Construir proyectos reales para tu portafolio

Este ejemplo es solo el inicio — podrías expandirlo para mostrar resultados por carrera, equipos, estadísticas o temporadas completas.

---

🔥 Mas APIs gratuitas para seguir practicando

• Pokémon API
• Rick and Morty API
• F1 API

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

📚 Sigue aprendiendo sobre APIs

También puede interesarte este tutorial:

👉 Cómo usar la API de Banxico paso a paso

👉 Como ver dashboard de ranking de Tenis 

---

🏁 Conclusión

Consumir una API es mucho más sencillo de lo que parece. Con solo unas líneas de JavaScript puedes obtener datos en tiempo real y construir herramientas increíbles.

Si te gustó este tutorial, compártelo — podrías ayudar a otro desarrollador a aprender algo nuevo hoy 🚀