Using conditional within HTML

Question

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>
            `
    
      });

disinfor · Accepted Answer · 2022-05-23 17:16:22Z

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>

Collectives™ on Stack Overflow

Using conditional within HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related