Looping through Array of Arrays in Ember

Question

I'm bit new and confused about Ember iterations.

I'm trying to construct a select inside ember template, like:

<select id="state_list">
  {{#each stateArrays as |stateArray|}}
    <option value={{stateArray[0]}}>{{stateArray[1]}}</option>
  {{/each}}
</select>

Here, stateArrays looks like:

[[1, "Alabama"], [2, "Alaska"], [3, "Arizona"]]

But, this throws error. When I try {{stateArray}}, I get string like "1, Albama"...

How to achieve the above in single iteration?

JonRed · Accepted Answer · 2016-11-07 17:34:22Z

2

Not that I love this technique, but you can access the individual elements on an array like this

{{#each stateArrays as |stateArray|}}
    <option value={{stateArray.[0]}}>{{stateArray.[1]}}</option>
  {{/each}}

Twiddle

Saves you having to write extra code.

answered Nov 7, 2016 at 17:34

JonRed

2,9815 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dashdashzako Over a year ago

I was thinking the same thing about this functionality. It really feels weird to use, but is the most straightforward technique to access an array specific element without adding any code to an Ember application. I couldn't find any example of this on Ember website, but do you know of any official reference about it?

JonRed Over a year ago

No, I can't sorry. Had a quick look, but couldn't see anything in the docs. Plenty of reference to it in official channels like Github issues though, but only in passing.

dashdashzako · Accepted Answer · 2016-11-07 19:58:44Z

You can convert the array of arrays into an array of objects:

mappedArray = [[1, "Alabama"], [2, "Alaska"], [3, "Arizona"]].map(function(array){
    return { num: array[0] , str: array[1] };
})

Then you can use it as:

<select id="state_list">
    {{#each mappedArray as |obj|}}
        <option value={{obj.num}}>{{obj.str}}</option>
    {{/each}}
</select>

Basically we cannot use syntax like stateArray[0] in the template.

UPDATE

If you don't want to create another array (mappedArray), you can write a helper:

App.GetArrayItemHelper = Ember.Helper.helper(function(values) {
    var array = values[0], index = values[1];
    return array[index];
})

Then in your template:

<select id="state_list">
    {{#each stateArrays as |stateArray|}}
        <option value={{get-array-item stateArray 0}}>{{get-array-item stateArray 1}}</option>
    {{/each}}
</select>

Collectives™ on Stack Overflow

Looping through Array of Arrays in Ember

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related