Using conditional within HTML-CodePudding

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  style="margin-bottom:15px;">
                  <div >
                    <div >
                      <img  src="${img}">
                    </div>
                    <div >` (featured == 1)?`
                      <div style="" >
                        <div >Featured</div>
                      </div>`:`<div></div>
                      <div >
                        <a  href="#">${area}</a>
                      </div>
                      <div><p style="font-size:10px;">${name}</p></div>

                    </div>
                  </div>
                </div>
                <hr>
            `
    
      });

CodePudding user response：

You are basically missing the braces around the ternary - since you are putting the variables within a string literal.

The important part:

<div >${featured == 1 ?
    `<div style="" >
        <div >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  style="margin-bottom:15px;">
                  <div >
                    <div >
                      <img  src="${img}">
                    </div>
                    <div >${featured == 1 ?
                      `<div style="" >
                        <div >Featured</div>
                      </div>` : `<div></div>`}
                      <div >
                        <a  href="#">${area}</a>
                      </div>
                      <div><p style="font-size:10px;">${name}</p></div>

                    </div>
                  </div>
                </div>
                <hr>
            `

});

<div id="hold"></div>