Why am I getting repeated responses from api call?

J

Jah Rik

Guest
I am sending an api request and get back duplicated or repeated responses from the data.I send api requests for dog name and id for each dog and put the data in html location. First dog comes three times then comes the second dog then the first dog again then the third dog then the second dog again and so on and so on.

i've tried the fetch api and async await and they both do the same thing. Iv,e also used map, forEach and for in with all the same results.

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)
});


I just want the dogs to output in chronological order without repeating. I do not get any error messages. Any help will be greatly appreciated. Thanks in advance.

Continue reading...
 
Top