Mi código básicamente obtiene datos API, crea elementos HTML para cada uno y actualiza los elementos HTML internos con datos API.
¿Cómo puedo actualizar los datos de la API y actualizarlos sin crear otros elementos HTML?
Este es mi código real:
let divCrypto = document.getElementById("divCrypto"); let temp, p1, p2, p3, imgz; let data = []; const getData = async () => { for (i = 0; i < 2; i++){ coinName = await fetch("https://api.coinlore.net/api/tickers/") .then((res) => res.json()); data.push(coinName.data[i]); p1 = document.createElement("p"); p2 = document.createElement("p"); p3 = document.createElement("p"); p1.innerHTML = "Coin:" + " " + data[i].name; p2.innerHTML = "Coin:" + " " + data[i].price_usd; p3.innerHTML = data[i].percent_change_7d + "%"; divCrypto.appendChild(p1); divCrypto.appendChild(p2); divCrypto.appendChild(p3); } console.log(data); }; getData(); console.log(data);Probé con: setInterval (getData, 1000); pero después de cada segundo, recrea los elementos HTML una y otra vez.
También traté de hacer 2 funciones diferentes pero no sé cómo acceder a los datos fuera de la función getData().
Si lo registro desde la consola, después de llamar a la función y actualizar los datos, obtengo [] y no puedo entender por qué.
Puede agregar al objeto html las monedas que desea mostrar y la función generará el html para ellas si no existe o simplemente actualizará los valores si existen
let divCrypto = document.getElementById("divCrypto"); let html = { BTC: 1, ETH: 1, ADA: 1 }; let data = []; let temp, p1, p2, p3, container; const getData = async () => { coinName = await fetch("https://api.coinlore.net/api/tickers/").then((res) => res.json() ); for (i = 0; i < 3; i++) { data.push(coinName.data[i]); container = document.getElementById(data[i].symbol); if (html[data[i].symbol] && !container) { // if this is the first time we read this coin we generate the html container = document.createElement("div"); container.id = data[i].symbol; p1 = document.createElement("p"); p2 = document.createElement("p"); p3 = document.createElement("p"); container.appendChild(p1); container.appendChild(p2); container.appendChild(p3); divCrypto.appendChild(container); } if (html[data[i].symbol]) { container.children[0].innerHTML = "Coin:" + " " + data[i].name; container.children[1].innerHTML = "Coin:" + " " + data[i].price_usd; container.children[2].innerHTML = data[i].percent_change_7d + "%"; } } console.log(data); }; getData(); setInterval(getData, 1000); //console.log(data); <div id="divCrypto"></div>