handlebar js if condition statement check with json object value

I have the issue of handling an if conditon in handlebars js

{"lstModel":[{"name":"Sizes","values":[{"value":"L"},{"value":"XL"},{"value":"M"}]},{"name":"Colours","values":[{"value":"Green"}]}]}


     <script type="text/x-handlebars-template" id="filter">
        <form class="col-md-6" id="filter-{{name}}">
                                <label>Select {{name}}</label>
                            {{#if name.Sizes}}
                                <div class="size-selector">
                                {{#values}}
                                    <div class="entry">{{value}}</div>
                                {{/values}}
                                </div>
                           {{else if name.Colours}}
                                <div class="color-selector">
                                {{#values}}
                                    <div class="entry" data-value={{value}} style="background: {{value}};">&nbsp;</div>
                                {{/values}}
                                </div>
                            {{/if}}
</form></script>

The issue I'm facing is when I'm trying to check with the values of json in if condition its not showing going inside of condition. Please help.

Your template should be rewritten like below for the conditions and loops to work correctly

<script type="text/x-handlebars-template" id="filter">
  {{#each lstModel}}
    <form class="col-md-6" id="filter-{{name}}">
      <label>Select {{name}}</label>
      {{#ifCond name 'Sizes'}}
        <div class="size-selector">
          {{#each values}}
            <div class="entry">{{value}}</div>
          {{/each}}
        </div>
      {{else}} 
        {{#ifCond name 'Colours'}}
          <div class="color-selector">
            {{#each values}}
              <div class="entry" data-value={{value}} style="background: {{value}};">&nbsp;</div>
            {{/each}}
          </div>
        {{/ifCond}}
      {{/ifCond}}
    </form>
  {{/each}}
</script>

And you need to register a custom 'handlebars helper' ifCond to match specific strings.

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

Finally, the output(compiled HTML) will looks like this,

<script type="text/x-handlebars-template" id="filter">
  <form class="col-md-6" id="filter-Sizes">
    <label>Select Sizes</label>
      <div class="size-selector">
          <div class="entry">L</div>
          <div class="entry">XL</div>
          <div class="entry">M</div>
      </div>
  </form>
  <form class="col-md-6" id="filter-Colours">
    <label>Select Colours</label>
        <div class="color-selector">
            <div class="entry" data-value=Green style="background: Green;">&nbsp;</div>
        </div>
  </form>
</script>

Hope this helps.