@Johnny_Hill

Как очистить результат запроса на сервер?

Здраствуйте! Есть данные полученные с сервера через fetch. При получении новых данных, старые данные не очищаются, а остаются и накапливаются с новыми. Как сделать, чтобы при получении новых данных старые данные очищались( очищался HTML). Буду очень благодарен!
'use strict';

const LOGIN_URL = 'https://api.github.com/users/{{login}}';
const button = document.querySelector('#button');
const input = document.querySelector('#input');
const wrap = document.querySelector('.wrap');
let list = document.querySelector('#list').innerHTML;

button.addEventListener('click', onButtonClick);

function onButtonClick(event) {
  event.preventDefault();
  fetch(LOGIN_URL.replace('{{login}}', input.value))
    .then((response) => {
      clearInput();
      return response.json();
    })
    .then((data) => {
      renderUser(data);
      removeHtml ();
    })
    .catch((error) => console.error(error));
}

function renderUser(data) {
  const dataHtml = generateDataHtml(data);
  wrap.insertAdjacentHTML("afterbegin", dataHtml);
}

function generateDataHtml(data) {
  return  list
    .replace('{{data.avatar_url}}', data.avatar_url)
    .replace('{{data.public_repos}}', data.public_repos)
    .replace('{{data.followers}}', data.followers)
    .replace('{{data.following}}', data.following);
}

function clearInput() {
  input.value = '';
}

function removeHtml () {
    list = '';
}


<div class="wrap">
  <input id="input" type="text" placeholder="Enter login...">
  <button id="button" type="submit">Search</button>
</div>

<script type="text/template" id = "list">
  <ul class = "list">
    <li class = "list-item">Avatar:
      <img src = "{{data.avatar_url}}" alt="avatar">
    </li>
    <li class = "list-item">Public repositories: {{data.public_repos}}</li>
    <li class = "list-item">Followers: {{data.followers}}</li>
    <li class = "list-item">Following: {{data.following}}</li>
  </ul>
</script>
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ответы на вопрос 1
@MamaLuyba
ну так как бэ написано же
insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы


соответственно, нужно очищать содержание блока, выводящего информацию. т.е. wrap.innerHtml = '';
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
Artezio Москва
от 160 000 до 220 000 ₽