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?

Answer 1

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.