Handlebars.js - Only show data if {{ image_url }} doesn't contain "questionmark"

Discussion in 'JavaScript' started by kayut, Jul 5, 2018.

  1. #1
    Hi,

    As you can see in this example, which I created on Codepen, some of the data don't have an image and whenever there's no image, a place holder image is shown:

    https://codepen.io/itsthomas/pen/WyBazO

    Is there any way in Handlebars.js to say that show the data only if the {{ image_url }} doesn't contain "questionmark"?

    Something like this?

    
    {{#each this}}
    {{#if image_url !contains "questionmark"}}
    
        <li class='list-container'>
          <div class="image-container">
              <img src="{{ image_url }}">
          </div>
          <div class="name-container">
            {{ name }}
          </div>
          <div class='role-container'>{{{ role }}}</div>
        </li>
    
    {{/if}}
    {{/each}}
    
    Code (markup):
     
    kayut, Jul 5, 2018 IP
  2. kayut

    kayut Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    I couldn't find any solution with Handlebars.js, so I did it in JavaScript

    
    (function removeNoImage() {
      for(let key in data.staff) {
        if(data.staff[key].image_url.indexOf('questionmark') !== -1) {
          delete data.staff[key];
        }
      }
    })();
    
    Code (markup):
     
    kayut, Jul 5, 2018 IP