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

Question

Hoping you guys can help me, I have been playing around with brewdogs api called punk api.
I have built a search function but whenever the user searches for a word that returns multiple beers it prints them all at once.
Is there anyway to print one title, one tagline, one description, one abv, one pic and then repeat til all have been printed?
It is currently just printing every title in one div then every tag line in one div and so on.
I have also attached an image to show the results when searched.

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

      })

    })
}

Answer 1

In your code, you asked to put all titles in the same div indeed:

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

Instead, you should use as many searchBeer as beer in data response. One popular technique is to use Template, like Reusable HTML components. There are some package for that. Here is a basic reusable component, let's say you have a search result div and at the bottom this component (HTML group of elements that are doing the same thing) in your HTML body:

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

And later at the bottom:

<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>

Now you need to clone the component multiple times, add values to them and append each component in search result container.

EDIT --------------

When you submit a new search, the function codes will be interpreted again. So if you don't clear the search result container well, you will have your title to add up continuously because of += , titleBeer.innerHTML += theBeer . You need to get rid of it and put data directly titleBeer.innerHTML = theBeer . Now the reason that might happening (cause I don't know what your function clear() does), is that when selecting component template:

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

before clearing the result container, the DOM return the first beer component that reside in search result container, instead of going at the bottom to take the template instead. That 1st component already had data, hence, doing:

titleBeer.innerHTML += theBeer

the titles keep adding together, which is wrong, instead it should be:

titleBeer.innerHTML = theBeer

So you can just clear the search results before reselecting the Template component. Here is the final code in this case:

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

    })
}

And for the rest you would format the component with CSS to fit your design, or just use existing component HTML codes from a Template with CSS ready.