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)
}
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 class="card" id="${item.id}">
<div class="card__image-container">
<img src="foodassets/${item.filename} alt="${item.dishname}">
</div>
<div class="card__content">
<p>${item.dishname}</p>
</div>
<div class="card__info">
<p>${item.author}</p>
</div>
</div>
`
}).join("")<section class="cards">
</section>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>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>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 class="card__image-container">
<img src="foodassets/${filename}" alt="${id}">
</div>
<div class="card__content">
<p>${dishname}</p>
</div>
<div class="card__info">
<p>${author}</p>
</div>`
cards1.appendChild(card)
}