Proyecto conversor de divisas usando una API con JavaScript

Accediendo a los datos

Muy bien tenemos los valores de la API listos para manipularlos en datos JSON. JSON es el acrónimo de JavaScript Object Notation, así que en realidad lo que tenemos son objetos con sus propiedades que podemos consultar de la forma como os enseñé en mi curso de JavaScript para principiantes.

scripts.js

.then(data => {
  console.log(data.rates);
})

En un nivel más de profundidad tenemos los datos que necesitamos:

.then(data => {
  console.log(data.rates.GBP);
  console.log(data.rates.USD);
  console.log(data.rates.JPY);
})

Ahora tenemos que tirar de nuestro ingenio e idear una forma de establecer los valores en los campos... ¿Cómo podríamos hacerlo?

¿Cada divisa tiene un código en mayúsculas verdad? USD, GBP, JPY

Este código podría servirnos para usarlo de referencia a la hora de establecer los valores de cambio, pero necesitamos añadirlo a cada input. Podemos hacerlo por ejemlo asignando un atributo id:

index.html

data-clave="USD"
data-clave="GBP"
data-clave="JPY"

En el caso del euro no lo necesitamos porque siempre se toma como base 1 euro al hacer las conversiones.

Ahora simplemente tenemos que hacer referencia a los inputs a partir de esa id y asignarles su nuevo valor de cambio:

scripts.js

.then(data => {
  document.querySelector('#USD')
    .dataset.cambio = data.rates.USD;
  document.querySelector('#GBP')
    .dataset.cambio = data.rates.GBP;  
  document.querySelector('#JPY')
    .dataset.cambio = data.rates.JPY;
})

Después de hacer este ajuste veremos que todo parece funcionar perfectamente, pero hay un problema. ¿Recordáis que os comenté que fetch funciona con promesas asíncronas? Eso signica que sabemos cuando realizamos la petición y confiamos en la promesa de que se procese la información al recibirse la respuesta, pero de mientras el proceso queda en un limbo temporal.

Ese tiempo es suficiente para que nuestra web muestre los valores de cambio que tenemos establecidos manualmente en los inputs en lugar de los que se cargan de la API.

Lo solucionaremos en la próxima y última lección.