时间戳

首页 > 解决方案 > 将数据打印到一个 div 中而不是循环每个 div，

javascript - 将数据打印到一个 div 中而不是循环每个 div，

问题描述

希望你们能帮助我，我一直在玩名为 punk api 的 brewdogs api。
我已经构建了一个搜索功能，但是每当用户搜索返回多个啤酒的单词时，它都会一次打印它们。
无论如何要打印一个标题，一个标语，一个描述，一个abv，一张图片，然后重复直到全部打印完？
它目前只是在一个 div 中打印每个标题，然后在一个 div 中打印每个标签行，依此类推。
我还附上了一张图片来显示搜索时的结果。

第二期

function beerAsk(e) {
  clear();
  const beerage = document.getElementById("BeerInputSearch").value;
  const url = api + beerage;
  e.preventDefault()
  fetch(url)
    .then(reponse => {
      return reponse.json()

    })
    .then(data => {

      data.forEach((beer) => {
        const theId = beer.id;
        const theBeer = beer.name;
        const theTagline = beer.tagline;
        const theDescription = beer.description;
        const theAbv = beer.abv;
        const thePic = beer.image_url;

        const nopic = document.getElementById('imageSearch').src = "https://images.punkapi.com/v2/keg.png"

        function imgDisplay() {
          if (thePic === null) {
            return nopic;
          } else {
            return thePic;
          }
        }
        // this is the bit that needs the work im guessing
        searchBeer.innerHTML += theBeer
        searchBeerTagline.innerHTML += theTagline
        searchBeerAbv.innerHTML += "ABV: " + theAbv + "%"
        searchBeerDescription.innerHTML += theDescription
        document.getElementById('imageSearch').src = imgDisplay();

      })

    })
}

标签： javascriptarraysapiloops

解决方案

在您的代码中，您确实要求将所有标题放在同一个 div 中：

// this is the bit that needs the work im guessing
searchBeer.innerHTML += theBeer
searchBeerTagline.innerHTML += theTagline
searchBeerAbv.innerHTML += "ABV: " + theAbv + "%"
searchBeerDescription.innerHTML += theDescription

相反，您应该使用尽可能多searchBeer的beer数据响应。一种流行的技术是使用模板，例如可重用的 HTML 组件。有一些包。这是一个基本的可重用组件，假设您有一个搜索结果 div，并且在底部的 HTML 正文中有这个组件（执行相同操作的 HTML 组元素）：

<div id="search-result" ></div>

后来在底部：

<div class="beer-component" style="display:none;" >
  <div class="beer-title" ></div>
  <div class="beer-tagline" ></div>
  <div class="beer-abv" ></div>
  <div class="beer-description" ></div>
  <div class="beer-image" ><img alt="beer" /></div>
</div>

现在您需要多次克隆组件，向它们添加值并将每个组件附加到搜索结果容器中。

编辑 - - - - - - -

当您提交新的搜索时，功能代码将再次被解释。所以如果你没有很好的清除搜索结果容器，你的标题就会因为 , 不断+=累加titleBeer.innerHTML += theBeer。您需要摆脱它并直接放入数据titleBeer.innerHTML = theBeer。现在可能发生的原因（因为我不知道您的功能是做什么的clear()），是在选择组件模板时：

const beerComponent = document.getElementsByClassName("beer-component")[0];

在清除结果容器之前，DOM 返回位于搜索结果容器中的第一个啤酒组件，而不是从底部获取模板。第一个组件已经有数据，因此，做：

titleBeer.innerHTML += theBeer

标题不断加在一起，这是错误的，应该是：

titleBeer.innerHTML = theBeer

因此，您可以在重新选择模板组件之前清除搜索结果。这是这种情况下的最终代码：

function beerAsk(e) {
  // clear(); NOT SURE WHAT IT DOES, BUT I CLEAR it below
  // new elements here
  const resultContainer = document.getElementById("search-result");
  // EDIT --- CLEAR Container first
  resultContainer.innerHTML = "";

  const beerComponent = document.getElementsByClassName("beer-component")[0];
  
  const beerage = document.getElementById("BeerInputSearch").value;
  const url = api + beerage;
  e.preventDefault()
  fetch(url)
    .then(reponse => {
      return reponse.json()

    })
    .then(data => {

      data.forEach((beer) => {
        const theId = beer.id;
        const theBeer = beer.name;
        const theTagline = beer.tagline;
        const theDescription = beer.description;
        const theAbv = beer.abv;
        const thePic = beer.image_url;

        const nopic = document.getElementById('imageSearch').src = "https://images.punkapi.com/v2/keg.png"

        function imgDisplay() {
          if (thePic === null) {
            return nopic;
          } else {
            return thePic;
          }
        }
        // this is the bit that needs the work im guessing
        // CHANGES HAPPEN HERE
        // Create a copy to be different DOM object from the original
        let component = beerComponent.cloneNode(true);

        let titleBeer = component.getElementsByClassName('beer-title')[0];
        let taglineBeer = component.getElementsByClassName('beer-tagline')[0];
        let abvBeer = component.getElementsByClassName('beer-abv')[0];
        let descriptionBeer = component.getElementsByClassName('beer-description')[0];
        let imgBeer = component.querySelector('.beer-image img'); // return one element

        component.style = "display: block;";
        // EDIT ---- change the += to =
        titleBeer.innerHTML = theBeer
        taglineBeer.innerHTML = theTagline
        abvBeer.innerHTML = "ABV: " + theAbv + "%"
        descriptionBeer.innerHTML += theDescription
        imgBeer.src = imgDisplay();
        imgBeer.alt = theBeer;
        
        // Now append the component in Search Result container
        resultContainer.appendNode(component);
      })

    })
}

对于其余部分，您可以使用 CSS 格式化组件以适合您的设计，或者仅使用已准备好 CSS 的模板中的现有组件 HTML 代码。

推荐阅读