0

Tengo un llamado a una API que me trae el precio del Bitcoin y lo imprimo dentro de una tabla, pero la función que implementé la ejecuto haciendo uso de Jquery... pero ya no quiero hacer uso de ello pero tampoco he encontrado la manera de insertar este código con JavaScript puro

El código de la función que me hace el llamado y en caso de ser exitoso el llamado, que me imprima en el DOM dentro del div con el id "priceBitcoin" el precio del bitcoin

function getBTCPrice() {
  setTimeout(() => {
    fetch(
      "https://rest.coinapi.io/v1/exchangerate/BTC/USD?apikey=ABCD"
    )
      .then((response) => response.json())
      .then(function (data) {
        let precio = "$" + Math.trunc(data.src_side_base[0].rate);
        console.log("Se inicializa el precio de BITCOIN en una variable");
        $("#priceBitcoin").html(printPrice(precio));
      })
      .catch((error) => console.log("BITCOIN Se presentó el ERROR " + error));
  }, 400);
}

Junto con la siguiente función que me retorna contenido en una etiqueta de p el precio que se le ingresa

//Funcion imprimir precio en etiqueta parrafo
function printPrice(precio) {
  let parrafo = "<price>";
  for (i = 0; i < 1; i++) {
    parrafo += "<p>" + precio + "<p>";
  }
  return parrafo;
}

No he encontrado la manera de insertarlo con JavaScript puro

Imagen de muestra de la tabla a ingresar el código

1
  • Te recomiendo esta página la cual muestra la forma de prescindir de jQuery en los aspectos fundamentales. Considera también aplicar código seguro, si vas a usar Javascript puro, innerHTML no es la mejor opción para contenido fuera de tu control, porque ese contenido puede ser inyección de código malicioso el cual innerHTML va a ejecutar sin verificar nada, una mejor alternativa es usar textContent.
    – A. Cedano
    Commented el 2 jun. 2022 a las 8:55

1 respuesta 1

2

Para lo que quieres hacer solo tendrás que sustituir tu línea de código de jQuery

 $("#priceBitcoin").html(printPrice(precio));

por esta otra línea de código nativo JavaScript que hace lo mismo:

 document.getElementById('priceBitcoin').innerHTML = printPrice(precio);

De esta manera buscas el elemento basándote en su id y le modificas su HTML interno reutilizando la función printPrice que no haría falta cambiarla. Aunque dado que no es una función que se encarga de escribir en pantalla el precio de bitcoin printPrice no es del todo un nombre acertado.

También he visto que dentro de esta función printPrice estas utilizando una etiqueta <price> que no existe en HTML y además faltaría cerrarla con </price> antes de devolverla pero como ya digo es una etiqueta que en HTML no existe y sería buena opción cambiarla.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.