Как обернуть каждую итерацию цикла в отдельные контейнеры div

Question

Я пытаюсь создать список объектов, которые вложены в массив. Мне удалось добавить свойство каждого объекта к определенному элементу (т. Е. Свойство title находится в элементе H1 и т. Д.); однако мне бы хотелось, чтобы каждый объект и все его свойства были обернуты в отдельный элемент DIV для каждого объекта. На данный момент все объекты находятся в одном div. Я думал, что цикл forEach может быть необходим. Я попытался возиться с этим и не могу понять это, хотя кажется, что это должно быть довольно просто.

Вот мой код:

<div id="container"></div>

CSS

#container {
  margin:50px;
  padding: 50px;
  border: 1px solid black;
}

И сценарий:

var ads = [
    {
        title: "Title 1",
        description: "Lorum ipsum dolor",
        start_date: "2018-09-01",
        end_date: "2018-12-30",
        offer: "50% Off",
        num_of_products: 7
    },
    {
        title: "Title 2",
        description: "Lorum ipsom",
        start_date: "2018-08-01",
        end_date: "2018-11-30",
        offer: "Save $25",
        num_of_products: 10
    },
    {
        title: "Title 3",
        description: "Lorum ipsum dolor etc",
        start_date: "2018-09-01",
        end_date: "2018-10-30",
        offer: "35% Off",
        num_of_products: 8
    },

];


    const parent = document.getElementById("container");

  for( { title, description, start_date, end_date, offer, num_of_products } of ads) {

    const headline = document.createElement("h1");
    headline.textContent = title;
    const descrip = document.createElement("p");
    descrip.textContent = description;    
    const dates = document.createElement("sub");
    dates.textContent = "Offer valid " + start_date + " through " + end_date;    
    const discount = document.createElement("h2");
    discount.textContent = offer;    
    const products = document.createElement("h4");
    products.textContent = num_of_products + " items still available! " ;

   // append 
    parent.appendChild(headline);
    parent.appendChild(discount);
    parent.appendChild(descrip);
    parent.appendChild(products);
    parent.appendChild(dates);

 }

Answer 1

Для этого я бы использовал облегченную библиотеку с именем lit-html, которая идеально подходит для следующих видов работ:

<div id="container"></div>

<script type="module">
  import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module'
  import { repeat } from 'https://unpkg.com/lit-html/directives/repeat.js?module'

  const offerTemplate = ({title, description, start_date, end_date, offer, num_of_products}) => html`
    <article>
      <h1>${title}</h1>
      <p>${description}</p>
      <sub>Offer valid ${start_date} through ${end_date}</sub>
      <h2>${offer}</h2>
      <h4>${num_of_products} items still available!</h4>
    </article>`

  const offersTemplate = offers => html`${repeat(offers, offerTemplate)}`

  render(offersTemplate(ads), document.getElementById('container'))
</script>

Популярный шаблон - это определение листа итерации как его собственнойпользовательский элемент:

const offerTemplate = ad => html`
  <ads-offer
      title="${ad.title}"
      description="${ad.description}"
      start-date="${ad.start_date}"
      end-date="${ad.end_date}
      offer="${ad.offer}"
      num-products="${ad.num_of_products}"
  ></ads-offer>`

, в котором вы можете определить DOM для <ads-offer> отдельно и независимо от коллекции.

Answer 2

вы можете создать div-обертку для каждой итерации следующим образом и применить для нее свой собственный класс, затем добавить все элементы в этот div, а затем добавить div в основной контейнер

const parent = document.getElementById("container");

  for( { title, description, start_date, end_date, offer, num_of_products } of ads) {

    const wrapper =  document.createElement("div");
    wrapper.className = "container"; // you can add your class for it
    const headline = document.createElement("h1");
    headline.textContent = title;
    const descrip = document.createElement("p");
    descrip.textContent = description;    
    const dates = document.createElement("sub");
    dates.textContent = "Offer valid " + start_date + " through " + end_date;    
    const discount = document.createElement("h2");
    discount.textContent = offer;    
    const products = document.createElement("h4");
    products.textContent = num_of_products + " items still available! " ;

   // append 
    wrapper.appendChild(headline);
    wrapper.appendChild(discount);
    wrapper.appendChild(descrip);
    wrapper.appendChild(products);
    wrapper.appendChild(dates);
    parent.appendChild(wrapper);
 }