I'm building some HTML within a javascript loop based on an object that has a few different attributes. The one I'm concerned with here is featured. Only a few elements have this set to 1, the rest are 0.
What I'm trying to achieve is to have the badge class and the title "Featured" added in a div on the elements where featured == 1.
I tried using this conditional operator within the html block but now my front-end just shows 50-60 divs with the featured badge even though I only have 2 that actually have featured set to 1, so I feel like the syntax may be wrong somewhere.
Basically, I want everything else in the HTML to show for every element, but I only want the div with class badges to show if featured == 1 on the element.
What am I doing wrong here?
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>
`
});You are basically missing the braces around the ternary - since you are putting the variables within a string literal.
The important part:
<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>