Tengo una tarea para obtener y mostrar en html datos particulares del resultado de la API (console.log). Por ahora, solo tengo un javascript que obtiene tipos de cambio con conversión de moneda. De los datos obtenidos solo necesito el tipo de cambio.
var myHeaders = new Headers(); myHeaders.append("apikey", "r4T22n3O14QL7FoG6FzY7FuUHTNXiKAy"); var requestOptions = { method: 'GET', redirect: 'follow', headers: myHeaders }; //var rslt = console.log(result); fetch("https://api.apilayer.com/currency_data/convert?to=RUB&from=EUR&amount=1", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));Aquí está el resultado que obtengo en console.log y mi problema es que no puedo mostrar: 1. nada de ese registro a HTML y 2. datos particulares (tasas) de ese registro .
este es el registro de la consola que estoy recibiendo:
{ "success": true, "query": { "from": "EUR", "to": "RUB", "amount": 1 }, "info": { "timestamp": 1658378463, "quote": 56.217115 }, "result": 56.217115 }Necesito obtener una tarifa/"cotización" como variable para usarla en otro lugar.
Gracias de antemano.
Use response.json() y luego extraiga las propiedades que desee en variables.
fetch("https://api.apilayer.com/currency_data/convert?to=RUB&from=EUR&amount=1", requestOptions) .then(response => response.json()) .then(json => { let quote = json.info.quote; document.getElementById("quote").innerText = quote; }) .catch(error => console.log('error', error)); Reemplace "quote" con el ID real del elemento donde desea mostrar la cotización.
Para mostrar el valor usando HTML, debe usar el concepto de literales de plantilla en javascript. Puede establecer elementos con una ID única en HTML. Usando HTML DOM Element innerHTML Property y Template Literals que puede lograr.
Datos particulares (tasas) de ese registro:
let tasa = resultado.resultado;
Como mencioné anteriormente, obtendrá el resultado de la tasa.
Suponiendo que tienes algo como
<div id="quote"></div>en tu html,
Yo haría algo como esto:
.then(response => response.json()) .then(data => { document.getElementById('quote').innerHTML = data.info.quote}) .catch(error => console.log('error', error));consulte https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch