I was trying to repeat a html structure using a for loop in javascript, and I wanted to know if there is a simpler/better way (seemed too long).

Structure:

<section class="cards">
    <div class="card" id="afb">
        <div class="card__image-container">
            <img src="foodassets/asinhas.png" alt="afb">
        </div>
        <div class="card__content">
            <p>Asinhas de frango ao barbecue</p>
        </div>
        <div class="card__info">
            <p>por Vania Steroski</p>
        </div>
    </div>

...
        
</section>

Javascript:

const dishes = [
    {
        id: "tbb",
        filename: "burger.png",
        dishname: "Triplo bacon burger",
        author: "Jorge Relato"
    },
    {
        id: "p4e",
        filename: "pizza.png",
        dishname: "Pizza 4 estações",
        author: "Fabiana Melo"
    }
]

const cards1 = document.querySelector('.cards')

for (let dish of dishes) {

    let card = document.createElement("div")
    card.classList.add('card')
    card.setAttribute("id", dish.id)

    let divimg = document.createElement("div")
    divimg.classList.add('card__image-container')
    let img = document.createElement("img")
    img.setAttribute("src", `foodassets/${dish.filename}`)
    divimg.appendChild(img)
    card.appendChild(divimg)

    let content = document.createElement("div")
    content.classList.add('card__content')
    let p = document.createElement("p")
    p.innerText = `${dish.dishname}`
    content.appendChild(p)

    card.appendChild(content)

    let info = document.createElement("div")
    info.classList.add('card__info')
    let p2 = document.createElement("p")
    p2.innerText = `por ${dish.author}`
    info.appendChild(p2)

    card.appendChild(info)
    
    cards1.appendChild(card)
}

CodePudding user response：

Using template literals and js map. See the snippet below.

const dishes = [
    {
        id: "tbb",
        filename: "burger.png",
        dishname: "Triplo bacon burger",
        author: "Jorge Relato"
    },
    {
        id: "p4e",
        filename: "pizza.png",
        dishname: "Pizza 4 estações",
        author: "Fabiana Melo"
    }
]

document.querySelector('.cards').innerHTML = dishes.map(item => {
  return `
    <div  id="${item.id}">
        <div >
            <img src="foodassets/${item.filename} alt="${item.dishname}">
        </div>
        <div >
            <p>${item.dishname}</p>
        </div>
        <div >
            <p>${item.author}</p>
        </div>
    </div>
  `
}).join("")

<section class="cards">     
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

the simplest :

const dishes = 
  [ { id       : 'tbb'
    , filename : 'burger.png'
    , dishname : 'Triplo bacon burger'
    , author   : 'Jorge Relato'
    } 
  , { id       : 'p4e'
    , filename : 'pizza.png'
    , dishname : 'Pizza 4 estações'
    , author   : 'Fabiana Melo'
  } ] 
  
const cards1 = document.querySelector('.cards')

for ( let {id,filename,dishname,author} of dishes)
  {
  let card = document.createElement('div') 
  card.className = 'card'
  card.id        = id
  card.innerHTML = `
    <div >
      <img src="foodassets/${filename}" alt="${id}">
    </div>
    <div >
      <p>${dishname}</p>
    </div>
    <div >
      <p>${author}</p>
    </div>`
  cards1.appendChild(card) 
  }

CodePudding user response：

Use cloneNode with deep = true to clone your element (and childs) then parse it, set values and append clone to the DOM.

const dishes = [{
    id: "tbb",
    filename: "burger.png",
    dishname: "Triplo bacon burger",
    author: "Jorge Relato"
  },
  {
    id: "p4e",
    filename: "pizza.png",
    dishname: "Pizza 4 estações",
    author: "Fabiana Melo"
  }
]

const cards1 = document.querySelector('#cards_container');

for (let dish of dishes) {
  let card = cards1.children[0], newCard = card.cloneNode(true), img = newCard.querySelector('img'),ps=newCard.querySelectorAll('p');
  newCard.id = img.alt = dish.id;
  ps[0].innerText = dish.dishname;
  ps[1].innerText = dish.author;
  img.src = 'foodassets/' dish.filename;
  cards1.appendChild(newCard);
}

<div class="cards" id="cards_container">
  <div class="card" id="afb">
    <div class="card__image-container">
      <img src="foodassets/asinhas.png" alt="afb">
    </div>
    <div class="card__content">
      <p>Asinhas de frango ao barbecue</p>
    </div>
    <div class="card__info">
      <p>por Vania Steroski</p>
    </div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

OR using HTML5 <templates>

const template = document.querySelector("template.card");
const section = document.querySelector("#cards_container");
const dishes = [{
    id: "tbb",
    filename: "burger.png",
    dishname: "Triplo bacon burger",
    author: "Jorge Relato"
  },
  {
    id: "p4e",
    filename: "pizza.png",
    dishname: "Pizza 4 estações",
    author: "Fabiana Melo"
  }
]

for (let dish of dishes) {
  let clone = document.importNode(template.content, true),
    p = clone.querySelectorAll("p"),img=clone.querySelector('img');
  p[0].textContent = dish.dishname;
  p[1].textContent = dish.author;
  img.alt = clone.id = dish.id;
  img.src  = dish.filename
  section.appendChild(clone);
}

<section class="cards" id="cards_container">
  <template class="card">
    <div class="card__image-container">
      <img src="foodassets/">
    </div>
    <div class="card__content">
      <p></p>
    </div>
    <div class="card__info">
      <p></p>
    </div>
  </template>
</section>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>