Ember data not populating model

Question

I'm attempting to grab some data from my Rails API and display it in the template. I'm very new to ember so the simpler the explanation the better and forgive me if this is a very stupid question.

The problem seems to be that the api data is not reaching the model correctly, it works when I have static fixture data but not for server data. The Get request to the server is going through and I'm getting a good response, so there must be something wrong with how the json is moved to the model.

My route in routes/external/jobs.js

import Ember from 'ember';

 export default Ember.Route.extend({ 
   model() {
   return this.store.findAll('job');
}

});

My job model in models/job.js

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    id: DS.attr('string')
});

I am expecting my API to return data in the form

{
  "jobs": [
      {
        id: "jfdsa132113",
        title: "developer",
        type: "Job",
        body: "lorem ipsum",
        published_at: date,
        tags: [
              "some stuff",
              "more stuff"
        ]
      },
      {
        id: "fdsafd3432",
        title: "designer",
        type: "Job",
        body: "lorem ipsum",
        published_at: date,
        tags: [
              "some stuff",
              "more stuff"
        ]
      }
   ]
}

My router

Router.map(function () {

 //index route

this.route('external', function () {
   this.route('jobs');
   this.route('support');

});

export default Router;

Answer 1

I think you have a misunderstanding with regards to DS.Model s, you should take a look at the guides, specifically http://guides.emberjs.com/v2.1.0/models/finding-records/ .

Assuming the route and template are properly set up, and that ApplicationAdapter is extending RESTAdapter / ActiveModel Adapter — see expected JSON formats here —, I believe the problem is in models/jobs.js , which is unnecessary.

Ember Data should make the right request to /jobs when you do store.findAll('job') . Try removing models/jobs.js and adapters/jobs.js , and doing the following:

// routes/external/jobs.js
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('job');
  }
});

If this doesn't help try also posting your router and any errors you get.

Answer 2

Assuming your models are loading up fine from your API I think the issue is in your template.

According to the docs, you need to access the attributes of each model explicitly. http://guides.emberjs.com/v2.1.0/templates/displaying-a-list-of-items/

So rather than {{title}} use {{job.title}} .

{{#each model as |job|}}
   <a href={{job.title}}>
      <div class="info">
          <div class="title">{{job.body}}</div>
      </div>
   </a>
{{/each}}

Answer 3

This fixed it

adding the file serializers/job.js with the lines

import DS from 'ember-data';

   export default DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {

});

I did not build the api and I noticed that some of the id's were underscored convention. More can be read about it here http://ember-doc.com/classes/DS.ActiveModelSerializer.html