sort function

controllers.application.js

import Ember from 'ember';
 
export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  amountSorter:Ember.computed.sort('modelHook', function(a,b){
  	return  parseInt(b['amount-spent']) - parseInt(a['amount-spent']);
  }),
  dateSorter:Ember.computed.sort('modelHook', function(a,b){
    return Ember.compare(
      new Date(b['posting_date']), new Date(a['posting_date'])
    );
  }),
  modelHook:Ember.computed(function(model, data){
  	return this.get('model');
  }),
  
  init(){ 
     Ember.run.schedule("afterRender",this,function() { 
       this.send('byDate'); 
       this.send('bySpent'); 
    }); 

  },
  actions:{
  	bySpent(){
    	this.set("datas", this.get('amountSorter'));
    },
    byDate(){
      console.log('i am called');
    	this.set("datas",this.get('dateSorter'));
    } 
  }
});

routes.application.js

import Ember from 'ember';

var data = [
  {
    "transaction_id": "24400000002",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "320.00",
    "posting_date": "08/10/2017",
    "date_of_purchase": "08/10/2017",
    "desc": "PAYMENT - THANK YOU"
  },
  {
    "transaction_id": "21300000002",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "250.00",
    "posting_date": "08/22/2017",
    "date_of_purchase": "08/22/2017",
    "desc": "PAYMENT - THANK YOU"
  },
  {
    "transaction_id": "30700000013",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "160.00",
    "posting_date": "07/04/2017",
    "date_of_purchase": "07/04/2017",
    "desc": "LATE CHARGES"
  },
  {
    "transaction_id": "35700000001",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "550.00",
    "posting_date": "07/07/2017",
    "date_of_purchase": "07/07/2017",
    "desc": "LATE CHARGES"
  },
  {
    "transaction_id": "30700000013",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "220.00",
    "posting_date": "07/13/2017",
    "date_of_purchase": "07/13/2017",
    "desc": "LATE CHARGES"
  },
  {
    "transaction_id": "24400000002",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "280.00",
    "posting_date": "08/10/2017",
    "date_of_purchase": "08/10/2017",
    "desc": "PAYMENT - THANK YOU"
  },
  {
    "transaction_id": "21300000002",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "250.00",
    "posting_date": "08/22/2017",
    "date_of_purchase": "08/22/2017",
    "desc": "PAYMENT - THANK YOU"
  },
  {
    "transaction_id": "30700000013",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "220.00",
    "posting_date": "07/04/2017",
    "date_of_purchase": "07/04/2017",
    "desc": "LATE CHARGES"
  },
  {
    "transaction_id": "35700000001",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "265.00",
    "posting_date": "07/07/2017",
    "date_of_purchase": "07/07/2017",
    "desc": "LATE CHARGES"
  },
  {
    "transaction_id": "30700000013",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "240.00",
    "posting_date": "07/13/2017",
    "date_of_purchase": "07/13/2017",
    "desc": "LATE CHARGES"
  },
  {
    "transaction_id": "17110117717",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "202.00",
    "posting_date": "08/15/2017",
    "date_of_purchase": "08/15/2017",
    "desc": "BIG BOSS NIGHT CLUB LTD"
  },
  {
    "transaction_id": "17110000003",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "246.77",
    "posting_date": "08/15/2017",
    "date_of_purchase": "08/15/2017",
    "desc": "NINE WEST"
  },
  {
    "transaction_id": "17110035810",
    "type_of_transaction": "Billed",
    "currency": "SGD",
    "amount-spent": "347.81",
    "posting_date": "08/23/2017",
    "date_of_purchase": "08/23/2017",
    "desc": "ZARA THE VENETIAN MACAU"
  },
  {
    "transaction_id": "17110117717",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "202.00",
    "posting_date": "08/15/2017",
    "date_of_purchase": "08/15/2017",
    "desc": "BIG BOSS NIGHT CLUB LTD"
  },
  {
    "transaction_id": "17110000003",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "246.77",
    "posting_date": "08/15/2017",
    "date_of_purchase": "08/15/2017",
    "desc": "NINE WEST"
  },
  {
    "transaction_id": "17110035810",
    "type_of_transaction": "unBilled",
    "currency": "SGD",
    "amount-spent": "399.81",
    "posting_date": "08/23/2017",
    "date_of_purchase": "08/23/2017",
    "desc": "ZARA THE VENETIAN MACAU"
  }
]

export default Ember.Route.extend({
  model(){
  	return data; 
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

*{
	list-style:none;
}


ul li {
	border:1px solid gray;
  border-bottom:0;
  padding:3px;
}

ul li span{
  display:inline-block;
  border-right:1px solid green;
  width:40%;
}

ul{
  border-bottom:1px solid gray;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

<button {{action 'bySpent'}}>Sort by amount-spent </button>
<button {{action 'byDate'}}>Sort by date_of_purchase </button>

<ul>
{{#each datas as |card| }}
	<li>
  	<span>{{card.amount-spent}}</span> 
  	<span>{{card.date_of_purchase}}</span>
  </li>

{{/each}}
</ul>
<br>
<br>
 

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}