arraysnode.jsember.jsliquidswig-template

Ember/ Liquid - Each statement multi-dimentional array


I'm having some difficulty with the ember #each statement. I would like to print the [0]th and [1]th position value from a multi-dimensional array in the below HTML code. i.e., I want to print the value Product X,Y,Z and GROUP A,B,C in a separate HTML code block. this.get(0) isn't working.

var uiTags = [
   ['**Product X**','GROUPA', '350'],
   ['**Product Y**','GROUPB', '150'],
   ['**Product Z**','GROUPC', '575']
];

HTML Code:

<ul class="list-group list-group-menu">
  {% raw %}{{#each uiTags}}{% endraw %}

   <!-- Print product name start (This block should print the product name) -->
    <li class="list-group-item"><a href="#">          
      <div class="checkbox checkbox-primary">
        <input type="checkbox" checked id="map-filter-{% raw %}{{ @index }}{% endraw %}" value="{% raw %}{{ this }}{% endraw %}"/>
        <label for="map-filter-{% raw %}{{ @index }}{% endraw %}">{% raw %}{{ this }}{% endraw %}</label>
      </div></a>
    </li>
   <!-- Print product name end-->

   <!-- Print group name start (This block should print the group name) -->
    <li class="list-group-item"><a href="#">          
      <div class="checkbox checkbox-primary">
        <input type="checkbox" checked id="map-filter-{% raw %}{{ @index }}{% endraw %}" value="{% raw %}{{ this }}{% endraw %}"/>
        <label for="map-filter-{% raw %}{{ @index }}{% endraw %}">{% raw %}{{ this }}{% endraw %}</label>
      </div></a>
    </li>
   <!-- Print group name end-->


  {% raw %}{{/each}}{% endraw %}
</ul>

Solution

  • You can use the get helper to access a specific index.:

    <ul>
      {{#each model as |row|}}
        <li>
          <ul>
            <li>{{get row "0"}}</li>
            <li>{{get row "1"}}</li>
          </ul>
        </li>
      {{/each}}
    </ul>
    

    And an ember twiddle with it.