Estoy creando algo de HTML dentro de un bucle de javascript basado en un objeto que tiene algunos atributos diferentes. El que me preocupa aquí se featured . Solo unos pocos elementos tienen este conjunto en 1, el resto son 0.
Lo que estoy tratando de lograr es agregar la clase de insignia y el título "Destacado" en un div en los elementos donde aparece == 1.
Intenté usar este operador condicional dentro del bloque html, pero ahora mi front-end solo muestra 50-60 divs con la insignia destacada, aunque solo tengo 2 que en realidad tienen el conjunto destacado en 1, así que siento que la sintaxis puede estar equivocada en alguna parte .
Básicamente, quiero que se muestre todo lo demás en el HTML para cada elemento, pero solo quiero que se muestre el div con badges de clase si aparece == 1 en el elemento.
¿Qué estoy haciendo mal aquí?
stores.forEach(function (store, index) { var name = store.ttle; var url = store.link; var img = store.imgs; var link = store.link; var area = store.area; var featured = store.featured; storesHtml += ` <div class="store-container" style="margin-bottom:15px;"> <div class="row"> <div class="col-lg-7"> <img class="img-fluid" src="${img}"> </div> <div class="col-lg-5">`+(featured == 1)?` <div style="" class="badges"> <div class="popularContainer">Featured</div> </div>`:`<div></div> <div class="name"> <a class="map-trigger" href="#">${area}</a> </div> <div><p style="font-size:10px;">${name}</p></div> </div> </div> </div> <hr> ` });Básicamente, le faltan las llaves alrededor del ternario, ya que está colocando las variables dentro de una cadena literal.
La parte importante:
<div class="col-lg-5">${featured == 1 ? `<div style="" class="badges"> <div class="popularContainer">Featured</div> </div>` : `<div></div>`} var stores = [{ ttle: 'test', link: 'https://google.com', imgs: 'https://picsum.photos/200/300', area: 'blah', featured: 1 }, { ttle: 'hi', link: 'https://google.com', imgs: 'https://picsum.photos/200/300', area: 'yep', featured: 0 } ]; var storesHtml = document.getElementById('hold'); stores.forEach(function(store, index) { var name = store.ttle; var url = store.link; var img = store.imgs; var link = store.link; var area = store.area; var featured = store.featured; storesHtml.innerHTML += ` <div class="store-container" style="margin-bottom:15px;"> <div class="row"> <div class="col-lg-7"> <img class="img-fluid" src="${img}"> </div> <div class="col-lg-5">${featured == 1 ? `<div style="" class="badges"> <div class="popularContainer">Featured</div> </div>` : `<div></div>`} <div class="name"> <a class="map-trigger" href="#">${area}</a> </div> <div><p style="font-size:10px;">${name}</p></div> </div> </div> </div> <hr> ` }); <div id="hold"></div>