Блог

Главная - Вопросы по программированию - Извлекать данные из API в setInterval без создания других HTML-элементов

Извлекать данные из API в setInterval без создания других HTML-элементов

#javascript #html

Вопрос:

Мой код в основном извлекает данные API, создает элементы HTML для каждого и обновляет элементы innerHTML данными API.

Как я могу обновить данные из API и обновить их без создания других HTML-элементов?

Это мой настоящий код:

 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-элементы.

Я также попытался создать 2 разные функции, но я не знаю, как получить доступ к данным за пределами функции getData ().

Если я консольно зарегистрирую это снаружи, то после вызова функции и обновления данных я получу [], и я не могу понять, почему.

Комментарии:

1. вы можете просто очистить элемент и добавить к нему, поэтому перед добавлением в divCrypto просто добавьте divCrypto.innerHTML = '';

2. Не работает. Я попробовал, и он создает только один элемент, хотя функция повторяется 3 раза.

3. Ах, я вижу, вам нужно 3 результата, затем добавьте это перед циклом, а также, если вам нужны 3 результата, ваш цикл for должен быть for (i = 0; i < 3; i )

4. Проверьте это здесь: codepen.io/wyzix33/pen/xxLbbdV?editors=1011

5. codepen.io/wyzix33/pen/xxLbbdV?editors=1011 Посмотрите, действительно ли это то, что вам нужно, вам просто нужно добавить в html-объект монеты, которые вы хотите отобразить, и функция сгенерирует для них html-код, если он не существует, или просто обновит значения, если они существуют

Ответ №1:

Вы можете добавить в 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] amp;amp; !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>
Метки: