Ember: Cannot access model data in controller/template

Question

I am new to ember framework and i have problems or doubts in accessing ember-data. I am using ember-cli and ember-cli-mirage for demo purposes.

config.js

export default function() {
this.get('/newcontracts', function(db, request) {

 return {
   data:[{
     "type": "newcontracts",
     "id": 1,
     "attributes": {
         "department-type": ["Legal", "Sales"],
         "agreement-type": ["Service Agreement", "Purchase"],
         "renewal-type": ["One time", "None"]
     }
  }]
 }
});

Ember Store

export default Model.extend({
   "type": "",
   "department-type": attr(""),
   "agreement-type": attr(""),
   "renewal-type": attr("")
});

Router

export default Ember.Route.extend({
     model: function(){
        console.log(this.get('store').findAll('newcontract')) // outputs ember class
        return this.get('store').findAll('newcontract');
     });

Controller

 export default Ember.Controller.extend({
  details: Ember.computed('model', function() {
   return this.store.peekRecord('new-contract', 1) // --> outputs ember class
    //console.log(this.store.peekRecord('new-contract', 1).get('department-type)) ---> desired output(array)
  })
  departmentDetails: Ember.computed('model', function() {
    this.details.get('department-type') ; ///error
  })

});

Template

{{log "model" details}} --> ember class
{{log "model" model}} --> ember class
{{log "model" model.department-type}} --> undefined

Can't I access departmentDetails like that? I get the desired data if I use the commented line in details property. Should I get the each data separately from the store? Also, logging the value in model gives an Ember class.

Even in the template file, I cannot get the value of model.department-type, etc.

I get the data in the Ember chrome inspector correctly. Fyi, I am using ember 2.5.1. Kindly help me on this.

Answer 1

this.get('store').findAll('newcontract'); gives you an array of newcontract.

Logging model[0].department-type in template will print the department-type .

To answer your question, you are not accessing departmentDetails anywhere, instead you are creating one in the controller.

Also, you cannot directly access a computed property like details , you should always use get() . So its this.get('details').get('department-type') not this.details.get('department-type')