Estaba tratando de repetir una estructura html usando un bucle for en javascript, y quería saber si hay una manera más simple/mejor (parecía demasiado larga).
Estructura:
<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) }Uso de literales de plantilla y mapa js . Vea el fragmento a continuación.
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>UsecloneNode con deep = true para clonar su elemento (y sus hijos), luego analícelo, establezca valores y agregue la clonación al 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> O usando 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>lo más simple :
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) }