Tengo algunos productos en una página.
<p class="wt-text-title-01"> <span class="wt-screen-reader-only"> Sale Price USD 5 </span> <span aria-hidden="true"> <span class="currency-symbol">USD </span><span class="currency-value">5</span> </span> </p>Tengo un total de 36 productos con diferentes precios. Quiero revisar cada producto y convertir la moneda con el símbolo de moneda que tengo y también multiplicar el valor en USD con el tipo de cambio de la moneda detectada.
tengo este codigo
var request = new XMLHttpRequest(); let exchange_rate = 1; request.open('GET', 'https://api.ipdata.co/?api-key=apikey'); request.setRequestHeader('Accept', 'application/json'); const http = new XMLHttpRequest(); request.onreadystatechange = function () { if (this.readyState === 4) { console.log(this.responseText); let data = JSON.parse(this.responseText); let currency = data.currency.code; if (currency == 'USD') { exchange_rate = 1; } if (currency == 'EUR') { exchange_rate = 1.28; } if (currency == 'GBP') { exchange_rate = 0.73; } if (currency == 'CAD') { exchange_rate = 0.78740; }; $('.currency-symbol').text(currency); let v = $('.currency-value').val(); $('.currency-value').each(function (i, obj) { let cv = parseInt($('.currency-value').text()) * exchange_rate; $('.currency-value').text(' ' + cv); }); } }; request.send();Puedo cambiar el símbolo de moneda para los 36 productos, pero la conversión de moneda parece no funcionar. Dado que cada clase tiene un valor diferente, ¿cómo puedo establecer la cantidad de moneda convertida correcta para cada producto?
Cuando realice un bucle en los valores de moneda en lugar de volver a llamar al selector, use obj como:
$('.currency-value').each(function (i, obj) { let cv = parseInt($(obj).text()) * exchange_rate; $(obj).text(' ' + cv); });La forma más sencilla de lograr lo que necesita es crear un objeto que contenga los tipos de cambio, codificados por el código de moneda. Luego, simplemente puede recuperar ese valor según el code en la respuesta de la API y realizar el cálculo del tipo de cambio.
También tenga en cuenta el uso de text() en lugar de val() en el siguiente ejemplo, ya que los elementos div no tienen una propiedad de value .
Finalmente, y lo más importante, dados los valores de cambio que está utilizando, debe dividir por ese tipo de cambio en su cálculo.
Con todo lo dicho, prueba esto:
// note updated to be more accurate based on todays prices let exchangeRates = { 'USD': 1, 'EUR': 1.17, 'GBP': 1.37, 'CAD': 0.7874 } // mock response from AJAX call. Irrelevant properties removed. let responseText = { "currency": { "name": "Euro", "code": "EUR", "symbol": "€", "native": "€", "plural": "Euros" } } // inside your XMLHttpRequest onreadystatechange handler: $('.currency-symbol').text(responseText.currency.symbol); $('.currency-value').text((i, t) => (t / exchangeRates[responseText.currency.code]).toFixed(2)); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="wt-text-title-01"> <span class="wt-screen-reader-only">Sale Price USD 5</span> <span aria-hidden="true"> <span class="currency-symbol">USD</span> <span class="currency-value">5</span> </span> </p> <p class="wt-text-title-01"> <span class="wt-screen-reader-only">Sale Price USD 10</span> <span aria-hidden="true"> <span class="currency-symbol">USD</span> <span class="currency-value">10</span> </span> </p> <p class="wt-text-title-01"> <span class="wt-screen-reader-only">Sale Price USD 15.99</span> <span aria-hidden="true"> <span class="currency-symbol">USD</span> <span class="currency-value">15.99</span> </span> </p>No estoy tan familiarizado con jQuery y todo eso, pero ¿no deberías hacer algo como esto?
obj.textContent = ' ' + cv;en lugar de esto:
$('.currency-value').text(' ' + cv);