从setInterval上的应用程序接口获取数据，而无需创建其他HTML元素
从setInterval上的应用程序接口获取数据，而无需创建其他HTML元素
提问于 2021-10-11 11:59:25
我的代码基本上是获取API数据，为每个元素创建HTML元素，并用API数据更新innerHTML元素。
如何在不创建新的HTML元素的情况下刷新API中的数据并更新它？
这是我的实际代码：
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);我尝试过: setInterval (getData，1000)；但是每过一秒，它就会一次又一次地重新创建HTML元素。
我还试图创建两个不同的函数，但我不知道如何访问getData()函数之外的数据。
如果我通过控制台将其记录到外部，那么在调用函数并更新数据之后，我会得到[]，我不明白为什么。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-11 13:53:39
您可以将要显示的硬币添加到html对象中，如果硬币不存在，函数将为其生成html；如果存在，则仅更新值。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69525845
复制相关文章
相似问题
腾讯云开发者
