Proper way to sideload data with ember-model

Question

Im trying to understand the proper way to sideload data using ember-model

I have json coming back like so ( i slimmed it down a bit from the actual json for sake of space here )

{
  "classrooms" : [
    {
      "classroom_name" : "Class 1",
      "id" : 1,
      "teacher_id" : 3,
      "grade" : 5,
      "assignments" : [

      ],
      "students" : [
        {
          "id" : 5,
          "last_name" : "Ford",
          "first_name" : "Henry",
          "district_id_number" : "MD454"
        }
      ]
    },
    {
      "classroom_name" : "Class 3",
      "id" : 2,
      "teacher_id" : 3,
      "grade" : 4,
      "assignments" : [
        {
          "id" : 5,
          "assignment_overview" : "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\r\n\r\nNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.",
          "assignment_title" : "Fractions",
          "story" : null
        }
      ],
      "students" : [
        {
          "id" : 5,
          "first_name" : "Henry",
          "last_name" : "Ford",
          "district_id_number" : "MD454"
        },
        {
          "id" : 3,
          "first_name" : "Jake",
          "last_name" : "Strong",
          "district_id_number" : "WH6879"
        },
        {
          "id" : 6,
          "first_name" : "Bryan",
          "last_name" : "Dobson",
          "district_id_number" : "B453"
        }
      ]
    }
  ]
}

In my Classroom Model i have a computed property like so where i loop over the embedded student objects, load them into the sideloaded data, then use the find to pull them out.

  classroomStudents: function () {
    var studentObjects = [],
        students = this.get('students');

    Msmapp.Student.load(students);

    students.forEach(function(student) {
      studentObjects.pushObject(Msmapp.Student.find(student.id));
    });

    return studentObjects;
  }.property('students')

Im thinking that this.get('students') may not be what the Msmapp.Student.load(students); expects. I assume that it expects data in a raw format and Im not 100% positive that this.get('students') is that.

This is what this.get('students') when i debug

[Object
   resource_document_ids: Array[0]
   resource_ids: Array[0]
   resource_image_ids: Array[0]
   resource_video_ids: Array[0]
   __proto__: Object
       district_id_number: "MD454"
       first_name: "Henry"
       id: 5
       resource_document_ids: Array[0]
       resource_ids: Array[0]
       resource_image_ids: Array[0]
       resource_video_ids: Array[0]
       __proto__: Object
 ,Object
 ,Object
]

And when i debug the returned studentObjects array i get classes but They dont appear to be correct

[Class
    __ember1372909895769: undefined
    __ember1372909895769_meta: Meta
   _super: undefined
   data: Object
   isLoaded: true
   isNew: false
   __proto__: Object
     id: 5
     resource_document_ids: Array[0]
     resource_ids: Array[0]
     resource_image_ids: Array[0]
     resource_video_ids: Array[0]
     __proto__: Object
     __defineGetter__: function __defineGetter__() { [native code] }
     __defineSetter__: function __defineSetter__() { [native code] }
     __lookupGetter__: function __lookupGetter__() { [native code] }
     __lookupSetter__: function __lookupSetter__() { [native code] }
     constructor: function Object() { [native code] }
     hasOwnProperty: function hasOwnProperty() { [native code] }
     isPrototypeOf: function isPrototypeOf() { [native code] }
     propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
     toLocaleString: function toLocaleString() { [native code] }
     toString: function toString() { [native code] }
     valueOf: function valueOf() { [native code] }
     isLoaded: true
     isNew: false
, Class
, Class
] 

In my template i have something like this

<ul>
  {{#if classroomStudents }}
    {{#each student in classroomStudents }}
      <li class="listed_item micro">
        {{#linkTo "classroom_student" student }}
          <div class='title'>{{ student.first_name }}</div>
        {{/linkTo}}
      </li>
    {{/each}}
  {{ else }}
  <li class="item">
    {{#linkTo "classroom.new_student" classNames='header_link tooltip'}}
      No students assigned
    {{/linkTo}}
  </li>
  {{/if}}
</ul>

Im not getting any of the values out because it appears that they are not being setup on the object but the linkto works correctly. I imagine its because the id is being set.

both {{ student.first_name }} or {{ first_name }} are undefined.

Answer 1

Your data is not constructed properly for side-loading. To side-load data, you need to:

1. Create an additional key at the highest level of your returned JSON that contains your data to side-load. In the example below, I created a "students" property off the highlest level of your returned data that contained all of the students.
2. Refer to those additional items by key in each of your main objects returned. In the example below, I changed the "students" property off each class to "student_ids" and made it an array of ints that referred to the ids of each student in the side-loaded data.

Example:

{
  "classrooms" : [
    {
      "classroom_name" : "Class 1",
      "id" : 1,
      "teacher_id" : 3,
      "grade" : 5,
      "assignments" : [

      ],
      "student_ids" : [ 5 ]
    },
    {
      "classroom_name" : "Class 3",
      "id" : 2,
      "teacher_id" : 3,
      "grade" : 4,
      "assignments" : [
        {
          "id" : 5,
          "assignment_overview" : "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\r\n\r\nNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.",
          "assignment_title" : "Fractions",
          "story" : null
        }
      ],
      "student_ids" : [ 5, 3, 6]
    }
  ],
  "students" : [
    {
      "id" : 5,
      "first_name" : "Henry",
      "last_name" : "Ford",
      "district_id_number" : "MD454"
    },
    {
      "id" : 3,
      "first_name" : "Jake",
      "last_name" : "Strong",
      "district_id_number" : "WH6879"
    },
    {
      "id" : 6,
      "first_name" : "Bryan",
      "last_name" : "Dobson",
      "district_id_number" : "B453"
    }
  ]
}

If you construct your data this way, Ember Data should handle the hookups for you.

More info here.