Question

我正在发送一个api请求，并从数据中获取重复或重复的响应。我发送了每只狗的狗名和ID的api请求，并将数据放在html位置。第一条狗来了三次，然后第二条狗来了，然后是第一条狗，然后是第三条狗，又是第二条狗，依此类推。

我尝试了获取api和异步等待，它们都做同样的事情。 Iv，e还使用map，forEach和for in来获得所有相同的结果。

       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

您正在将每只狗的HTML和先前的每只狗的HTML添加到output变量中。同时，您正在重复运行呼叫insertAdjacentHTML，每只狗一次。这意味着每次将output的内容添加到页面中时，您将获得全部内容，包括到目前为止处理的每条狗，而不仅仅是当前的狗。

有两种明显的方法可以解决此问题。要么

1）删除+中的+=，即output =，以便每次输出都会被覆盖，而不是附加到输出。

或

2）在foreach循环结束后，将对insertAdjacentHTML的调用移至，这样，当您完成为所有狗。

Answer 2

只需将其从forEach循环中删除：

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

它应该在它外面。与output处于同一级别。如果您是我，我还会考虑使用.map或.reduce来生成output字符串。可以稍微简化一下代码。

为什么我从api调用中得到重复的响应？

2 个答案: