Loading values into select menu from json data - json

Question

I have a multi-form that I am trying to build using ember.js. I've created the first step of the form using an array of data in my ObjectController but I now need to get the data from a JSON object provided by a rails app. I'm having a bit of trouble understanding how I can use ember-data to retrieve the JSON object and load just the options data into my select menu.
Here's my HTML:
<div class="col-md-12 col-xs-12 content">
<div class="text-center center-block">
<div class="col-md-12">
<span>Which of these</span>
<h2>Activities Appeal</h2>
<span>to you the most?</span>
<div class="form-group single-step">
{{view Ember.Select
content=studies
optionValuePath="content.value"
optionLabelPath="content.label"
prompt="Area of Study"
name="answer[3]"
id="answer_3"
class="form-control span12"
}}
</div>
</div>
</div>
Here's my JS:
var Mobile = Ember.Application.create({
LOG_TRANSITIONS: true
});
/** Setup the urls for the mobile screens **/
Mobile.Router.map(function(){
this.resource('index', { path: "/" });
});
/* Extend the controllers to load objects */
Mobile.IndexController = Ember.ObjectController.extend({
selecedStudies:null,
studies: [
{value:'14', label: 'Business'},
{value:'15', label: 'Criminal Justice'},
{value:'16', label: 'Education'},
{value:'17', label: 'Engineering & Science'},
{value:'18', label: 'Fire & Emergency Mgmt'},
{value:'19', label: 'Healthcare'},
{value:'20', label: 'Information Technology'},
{value:'21', label: 'Legal/Paralegal Studies'},
{value:'22', label: 'Liberal Arts'},
{value:'24', label: 'Psychology & Counseling'},
{value:'25', label: 'Social Services'},
{value:'26', label: 'Web/Graphic Design'},
{value:'27', label: 'Theology'},
{value:'23', label: 'Nursing'}
]
});
And Here is the JSON data as it will come from the rails app:
{"form_id":17,"questions":[{"question":{"id":3,"identifier":"","name":"Area of Study","question_validation_id":null,"require_question":true,"set_as_qualification":false,"type_id":3,"from_option":true,"options":[{"option":{"id":14,"name":"Business"}},{"option":{"id":15,"name":"Criminal Justice"}},{"option":{"id":16,"name":"Education"}},{"option":{"id":17,"name":"Engineering & Science"}},{"option":{"id":18,"name":"Fire & Emergency Mgmt"}},{"option":{"id":19,"name":"Healthcare"}},{"option":{"id":20,"name":"Information Technology"}},{"option":{"id":21,"name":"Legal/Paralegal Studies"}},{"option":{"id":22,"name":"Liberal Arts"}},{"option":{"id":24,"name":"Psychology & Counseling"}},{"option":{"id":25,"name":"Social Services"}},{"option":{"id":26,"name":"Web/Graphic Design"}},{"option":{"id":27,"name":"Theology"}},{"option":{"id":23,"name":"Nursing"}}],"option_view":"grid"}}]}
The end goal is to be able to get and post data for each step in a multi-form but for now I just need to be able to get my data from the JSON object and display it in the step of the form.
I have a working example of my static form available here: http://jsbin.com/qefod/5/edit
Any insight on the proper Ember way to loading a JSON object with Ember Data would be much appreciated.
::: UPDATE :::
I have a bit of an update where I've changed the routes to reflect the source data nesting and I've added model definitions and API request. You can see the updated JSBin here: http://jsbin.com/qefod/7/edit
What I need to do in this example is to load the options from the JSON data into the select menu. For some reason my Ember console does load the data into the model but I can not access it through the template.

Answer 1

To get the value selected in your select element, you need to add value to your view Ember.select like so:
{{view Ember.Select
content=studies
optionValuePath="content.value"
optionLabelPath="content.label"
prompt="Area of Study"
name="answer[3]"
value=selecedStudies
id="answer_3"
class="form-control span12"
}}
Then you can access this inside your step2 action in your controller:
actions: {
step2: function() {
console.log(this.get('selecedStudies'));
}
}