Ember js iterating through a json array of objects to create elements

Question

Trying to dynamically create a select input with options from a json array of objects. The JSON array of objects looks like this:

var curr_sel = [
    {v:"1", n:"USD"},
    {v:"2", n:"GBP"},
    {v:"3", n:"CAD"},
    {v:"4", n:"AUD"},
    {v:"5", n:"EUR"}
];

And my view template has the following:

<select>
{{#each opt in curr_sel}}
    <option value="{{ opt.v }}" >{{ opt.n }}</option>
{{/each}}
</select>

But that produces a select element with no options. Kindly help. Even better if it means using the EmberJS select class http://emberjs.com/api/classes/Ember.Select.html

Marcio Junior · Accepted Answer · 2013-10-21 16:09:31Z

1

The better way to use the select tag is using Ember.Select.

Here is a sample:

Template

<script type="text/x-handlebars" data-template-name="application">   
  {{view Ember.Select content=curr_sel
    optionLabelPath="content.n"
    optionValuePath="content.v"
    selection=selectedCurrency}}
</script>

Javascript

App = Ember.Application.create({});

App.ApplicationController = Ember.Controller.extend({
    curr_sel: [
        {v:"1", n:"USD"},
        {v:"2", n:"GBP"},
        {v:"3", n:"CAD"},
        {v:"4", n:"AUD"},
        {v:"5", n:"EUR"}
    ],
    selectedCurrency: null,
    selectedCurrencyChanged: function() {
        console.log(this.get('selectedCurrency.n'));
    }.observes('selectedCurrency')
});

Give a look in this fiddle to see this in action http://jsfiddle.net/marciojunior/FJkEr/

answered Oct 21, 2013 at 16:09

Marcio Junior

19.1k4 gold badges47 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

Ember js iterating through a json array of objects to create elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related