Failed to sort data in emberjs

Question

I have list of price which i want to sort based on selection of drop down.I want to sort data in both ways ascending and descending.

On selection of "Low to high", I want to sort list of price in descending order and on selection of "High to low", I want to sort list of price in ascending order.

Here,I am passing Application fixture to model of index route and in Astcart.IndexController i am trying to sort data but it is throwing an error Uncaught TypeError: Object [object Object] has no method 'sort'

Astcart.IndexRoute = Ember.Route.extend({
   model: function() {
      return Astcart.Application.find();
   }
}); 

Astcart.IndexController = Ember.ArrayController.extend({
    sortingMethod: null,
    sortingOptions: [
        {option: "Best Match", id: 0},
        {option: "Low to High",    id: 1},
        {option: "High to Low",    id: 2}
    ],

    sortProperties: ['product_price'],
    sortAscending: true,
    sortingMethodDidChange: function() {            
      if(this.get('sortingMethod') == 1){
             alert("sort data in descending order");
      }else if (this.get('sortingMethod') == 2){
              alert("sort data in ascending order");
      }
      var content = this.get("content");
         this.set('content', Ember.copy(content.sort(), true));
      }.observes('sortingMethod')   
}); 

Fixture :

Astcart.Application.adapter = Ember.FixtureAdapter.create();

Astcart.Application.FIXTURES=[
{
    "home_products": [
        {
            "id": "1",
            "name": "Mobiles & Accessories",
            "contents": [
                {
                    "id": "1",
                    "price": "1"
                },
                {
                    "id": "2",
                    "price": "2"
                },
                {
                    "id": "3",
                    "price": "3"
                },
                {
                    "id": "4",
                    "price": "4"
                }
            ]
        },
        {
            "id": "2",
            "name": "Mobiles & Accessories",
            "contents": [
                {
                    "id": "41",
                    "price": "5"
                },
                {
                    "id": "5",
                    "price": "6"
                },
                {
                    "id": "6",
                    "price": "7"
                },
                {
                    "id": "7",
                    "price": "8"
                }
            ]
        },
        {
            "id": "3",
            "name": "Mobiles & Accessories",
            "contents": [
                {
                    "id": "8",
                    "price": "9"
                },
                {
                    "id": "9",
                    "price": "10"
                },
                {
                    "id": "10",
                    "price": "11"
                },
                {
                    "id": "11",
                    "price": "12"
                }
            ]
        }
    ]
}
];

I have posted complete code here(jsfiddle). Can any help me to make this jsfiddle work?

Answer 1

It looks like you are making things more complicated then they have to be.

I made a simplified solution here: http://jsfiddle.net/SFNBB/4/

Some things that could be useful to remember in the future.

1) You are using string literals in your fixture data

{
    "id": "8",
    "price": "9"
}

If you want to sort the properly you must use real numbers, like this

{
    "id": 8,
    "price": 9
}

2) I think you should change the way you get your products by altering the way the models look, also remember that you should define them in singular, Product not Products.

Astcart.Group = Ember.Model.extend({
    id: Ember.attr(),
    name: Ember.attr(),
    products: Ember.hasMany('Astcart.Product', {key: 'products'})
});   

Astcart.Product = Ember.Model.extend({
    id: Ember.attr(),
    price: Ember.attr(),
    group: Ember.belongsTo('Astcart.Group', {key: 'group_id'})
});

Astcart.Group.FIXTURES = [
{
    "id": 1,
    "name": "Mobiles & Accessories 1"
}
];

Astcart.Product.FIXTURES = [
{
    "group_id": 1,
    "id": 1,
    "price": 1
}

3) Now you can just get all products by using the model hook:

Astcart.IndexRoute = Ember.Route.extend({
    model: function() {
        return Astcart.Product.find();
    }
});

And iterate through the results like this.

<ul>
{{#each controller}}  
    <li>
        {{price}}
        ({{group.name}})
    </li>
{{/each}}
</ul>

4) Finally this is how I choose to control the sorting

Astcart.IndexController = Ember.ArrayController.extend({
    sortingMethod: 0,
    sortingOptions: [
        {option: "Best Match",  id: 0, property: 'id', asc: true},
        {option: "Low to High", id: 1, property: 'price', asc: true},
        {option: "High to Low", id: 2, property: 'price', asc: false}
    ],
    currentOption: function() {
        return this.get('sortingOptions')[this.get('sortingMethod')];
    },
    sortProperties: function() {
        return [this.currentOption().property];
    }.property('sortingMethod'),
    sortAscending: function() {
        return this.currentOption().asc;
    }.property('sortingMethod')
});

I Added some extra properties in the sortingOptions so you can control how the sorting should be defined, currentOption is just there as method to keep the code DRY.