Почему я получаю повторные ответы от вызова API?

Question

Я отправляю запрос API и возвращаю дублированные или повторные ответы из данных. Я отправляю запросы API для имени собаки и идентификатора для каждой собаки и помещаю данные в местоположение html. Первая собака приходит три раза, потом вторая собака, потом первая собака, потом третья собака, потом вторая собака, снова и так далее, и так далее.

Я пробовал вызывать api и async, ждут, и они обасделать то же самое. Я также использовал map, forEach и for с теми же результатами.

       fetch(api)
       .then(response =>{
           return response.json();
       })
       .then(data => {
          console.log(data)
          let dogs = data;
          let output = '';
          dogs.forEach(dog => {
              console.log(dog.id);
              output+=`
              <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
              <div className="card">
                <img src="gdogs.jpg" className="img-card-top" style="height:14rem"alt="dogs"/>
                  <div className="card-body text-capitalize">
                    <h6 class="name-title">${dog.name}</h6>
                    <h6 class="id">${dog.id}</h6>
                    <h6 className="text-warning text-slanted">Provided by Dog API</h6>
                  </div>
                  <div className="card-footer">
                    <button type="button" className="btn btn-primary text-capitalize" ></button>
                    <a href="https://api.thedogapi.com" className="btn btn-success mx-2 text-capitalize" target="_blank" rel="noopener noreferrer">dog api</a>
                  </div>
              </div>

            </div>

              `
              document.getElementById('dog-info').insertAdjacentHTML('beforeend', output)
          });

Я просто хочу, чтобы собаки выводили в хронологическом порядке, не повторяя. Я не получаю никаких сообщений об ошибках. Любая помощь будет оценена. Заранее спасибо.

Answer 1

Просто удалите это из цикла forEach:

document.getElementById('dog-info').insertAdjacentHTML('beforeend', output)

Оно должно быть вне его. На том же уровне, что и output. Если бы я был вами, я бы также подумал об использовании .map или .reduce для генерации output строки. Это может немного упростить код.

Answer 2

Вы добавляете HTML для каждой собаки в переменную output вместе с каждой предыдущей собакой. Вместе с этим вы выполняете вызов insertAdjacentHTML несколько раз, по одному разу для каждой собаки. Это означает, что каждый раз, когда вы добавляете содержимое output на свою страницу, вы получаете все содержимое, включая обработанную до сих пор собаку, а не только текущую.

Существует два очевидных способа исправить это. ,Либо

1) Удалите + в +=, то есть output =, так что output` будет перезаписываться каждый раз, а не добавляться к.

или

2)Переместите вызов на insertAdjacentHTML после окончания цикла foreach, чтобы содержимое output записывалось на страницу только один раз, когда вы закончили генерировать HTML для всех собак.