Ember.js: How to view data from Ember.Map

Question

I would like to view some contact information (name, email,...) grouped by Department but I am unable to achieve it with Handlebars.

• Department X

  • Contact x1 info
  • Contact x2 info
  • ...

• Department Y

  • Contact y1 info
  • Contact y2 info
  • ...

I don't know how many departments I have in advance. So, in my controller I tried to load information in an Ember.Map where departments are its keys and and array with contacts' info is the value for each department. It is something like this:

map = Ember.Map.create();
// Load data from server into map
// m = {'Department X': [{name:'x1','email':'emailx1',...},{...}], 'Department Y':[....], ...}

{{#each department in map}}
    {{department}}
    {{#each contact in map.keys}}
        {{contact.name}} | {{contact.email}}
    {{#each}}
{{#each}}

An error is thrown saying that "an EmberCollectionView's content must implement Ember.Array. You passed [object Object]". Is it possible to achieve suh a task with nested data? Any help will be welcome. Thanks.

Answer 1

What about creating a Department class like this:

App.Department = Ember.Object.extend({
  name: null
  contacts: null // will be an array of App.Contact
})

and a Contact class like this:

App.Contact = Ember.Object.extend({
  name: null,
  email: null,
})

When loading your data, you could simply build an array of departments

App.departments = [];

// parse the arriving json and populate the departments array
App.departments.pushObject(
   App.Department.create(
        {name: dptLoadedName, contacts: [App.Contact.create({...})]}
   )
)

So, in your template, you could do something like:

{{#each department in App.departments}}
   {{department.name}}
   {{#each contact in department.contacts}}
     {{contact.name}} | {{contact.email}}
   {{#each}}
{{#each}}