Filtering and rearranging model/content in Ember Controllers

Question

Let's say I have a JSON array of data, something like:

[ {"name":"parijat","age":28},
  {"name":"paul","age":28},
  {"name":"steven","age"27},
...
]

that is part of my model, and this model is setup like this:

App.UserRoute = Ember.Route.extend({ model:function(){ return App.User.FIXTURES ; // defined above } });

I want to get the unique ages from this JSON array and display them in my template, so I reference the computed properties article and read up a little on how to enumerate Ember Enumerables, to eventually get this:

    App.UserController = Ember.ArrayController.extend({
         ages:function(){
              var data = this.get('content'); 
              var ages = data.filter(function(item){
                       return item.age;
             });

        }.property('content');
});

Now the above piece of code for controller is not correct but the problem is that it doesn't even go into data.filter() method if I add a console.log statements inside. IMO, it should typically be console logging as many times as there exist a App.Users.FIXTURE. I tried using property('content.@each') which did not work either. Nor did changing this.get('content') to this.get('content.@each') or this.get('content.@each').toArray() {spat an error}.

Not sure what to do here or what I am completely missing.

Andre Malan Andre Malan · Accepted Answer · 2013-12-06T20:53:56

Filter is used for reducing the number of items, not for mapping.

You can use data.mapBy('age') to get an array of your ages:

ages:function(){
  return this.get('content').mapBy('age');
}.property('content.@each')

or in your handlebars function you can just use the each helper:

{{#each item in controller}}
  {{item.age}}
{{/each}}

Filtering and rearranging model/content in Ember Controllers

1 Answers