Cómo Consumir APIs con JavaScript: 7 Ejemplos Reales Paso a Paso

Imagen
Cómo Consumir APIs con JavaScript: 7 Ejemplos Reales Paso a Paso Consumir APIs es una de las habilidades más importantes para cualquier desarrollador moderno. En esta guía central encontrarás 4 ejemplos reales donde utilizamos JavaScript para conectarnos a APIs públicas y obtener datos dinámicos. Verás ejemplos desde proyectos divertidos hasta integraciones financieras reales. 🌌 1️⃣ Rick and Morty API – Mini Proyecto Web En este proyecto construimos un buscador interactivo de personajes utilizando fetch() , paginación y filtros dinámicos. Consumo de API REST Paginación Renderizado dinámico en el DOM Ver demo completa Rick and Morty API → 🏎️ 2️⃣ API de Fórmula 1 – Datos Deportivos en Tiempo Real En este ejemplo consultamos información de pilotos, carreras y estadísticas de la Fórmula 1 usando una API pública. Request HTTP con JavaScript Manejo de respuesta JSON Visualización de datos deportivos Ver ejemplo API Fórmula 1 → 🐉...
Publicar un comentario

Cómo consultar UDIS, CETES, TIIE y tipo de cambio con la API de Banxico en JavaScript

Cómo consultar UDIS, CETES, TIIE y tipo de cambio con la API de Banxico en JavaScript

Aprende a crear un panel en JavaScript que consulta en tiempo real indicadores de Banxico como UDIS, CETES, TIIE, tipo de cambio y salario mínimo.

El Banco de México publica diariamente indicadores económicos como el valor de las UDIS, la TIIE, el tipo de cambio, los CETES y el salario mínimo. Gracias a su API pública, podemos conectarnos desde JavaScript y automatizar consultas financieras en tiempo real.

En esta entrada construimos un panel interactivo para consultar el dato más reciente de varias series con unas cuantas líneas de código.

Requisitos

  • Un token gratuito de Banxico (solicítalo en su portal SIE).
  • Un archivo .html o tu editor favorito.
  • Conexión a internet.

Tip: en este ejemplo colocamos el token en la URL para simplificar la prueba. En producción, considera hacerlo desde tu backend para no exponerlo.

Panel en JavaScript (copiar & pegar)

🔎 Esperando consulta…

Haz clic en “Consultar” tras elegir una serie. El panel mostrará el último valor publicado por Banxico.


Series útiles en la API de Banxico

Serie Banxico Indicador Valor Actual
SP68257 UDIS --
SP74665 Inflación No subyacente (nueva definición) Anual --
SF60634 CETES --
SF43718 FIX --
SF61745 Tasa objetivo 7.75%
SF43773 Tasa de fondeo bancario 7.76%

Te comparto la url para probar el panel Panel Javascript para ver datos API banxico




Conclusión

Con unas pocas líneas de JavaScript puedes consultar indicadores clave desde la API de Banxico y alimentar dashboards, reportes o sitios web. Este panel es una base que puedes extender con gráficas históricas, exportación a CSV/Excel o integración en otras aplicaciones.

¿Te fue útil esta herramienta? Compártela con colegas o estudiantes que trabajen con datos financieros.

Comparte

Comentarios

Publicar un comentario

Dejanos tus dudas y comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

Imagen
Bienvenidos a programacionparatodos.com Esta semana vamos a conocer otro lenguaje de programación que es ASP ( Active Server Pages  )  que es de la familia de Microsoft es plataforma Cliente/Servidor y que permite crear páginas WEB dinámicas, utiliza un servicio conocido como IIS o  (Internet Information Services) fue creado en 1996. Cuando ven paginas WEB que terminan en .aspx es que están desarrolladas con este lenguaje. Páginas  que por ejemplo utilizan ASP https://www.cfe.mx/Pages/Index.aspx https://www.interfactura.com/Index.aspx https://www.canadainternational.gc.ca/mexico-mexique/index.aspx?lang=spa Igual hay mucho trabajo para este software por ejemplo les dejó las siguientes vacantes  Desarrollador .NET .NET Developer NET LEAD Para seguir con el formato del blog, les quiero compartir un programa de ejemplo, pero he de decirles que es la primera vez que programo en ASP , ya que no lo había hecho antes, me tomo...
Leer más

API de banxico para obtener tipo de cambio utilizando Javascript

Imagen
En esta entrada vamos a ver un código de Javascript para obtener el tipo de cambio del Banco de México (Banxico) mediante  API, puedes usar el siguiente código JavaScript. Este ejemplo utiliza `fetch` para realizar la solicitud a la API. Asegúrate de tener una API Key de Banxico. Banxico token Para poder ejecutarlo necesitamos obtener primero nuestro token en  https://www.banxico.org.mx/SieAPIRest/service/v1/token Con ese token puedes hacer hasta 40,000 consultas gratis por día. Cómo llamar api de banxico y javascript Después necesitamos identificar la serie del dato que queremos identificar , en este ejemplo vamos a utilizar la serie  SF43718 el cual obtenemos de la liga   https://www.banxico.org.mx/SieAPIRest/service/v1/doc/catalogoSeries# <html> <head>     <title>Tipo de Cambio Banxico</title>     <style>         body {             font-family: Arial, sans-serif; ...
Leer más

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)

Imagen
Macro en Word para automatizar documentos y generar diplomas automáticamente (VBA paso a paso) ¿Sigues creando documentos uno por uno en Word? Si generas diplomas, constancias, contratos o reportes manualmente, este proceso puede quitarte horas cada semana. En esta guía aprenderás cómo automatizar documentos en Word usando una macro VBA , permitiéndote generar múltiples archivos en segundos y reducir errores humanos. Este tutorial es ideal para administrativos, analistas, docentes y cualquier profesional que quiera ahorrar tiempo y mejorar su productividad. ¿Qué problemas resuelve esta macro? Evita crear documentos manualmente Reduce errores al copiar nombres Ahorra horas de trabajo administrativo Permite generar múltiples diplomas en segundos Mejora tu eficiencia profesional ¿Sabías que no solo en Excel puedes crear macros? También puedes automatizar tareas en Word, Outlook, PowerPoint y Access gracias a Visual Basic para Aplicaciones (VBA). Cómo hab...
Leer más