Angular 4: Order By Array of Dates

Question

I have got a problem regarding sorting an array of Dates in Angular 4. I want to order my Customer array by the value releaseDate. So this is what I have right now:

In the customer.component.ts :

sort() {
    this.customers.sort((a: Customer, b: Customer) =>
      new Date(a.releaseDate).getTime() - new Date (b.releaseDate).getTime());
  }

I want to trigger this method by clicking on a button in customer.component.html:

<button (click)="sort()"> Sort</button>
<li *ngFor="let customer of customers">
  {{customer.releaseDate}}
</li>

When I click the button nothing happens. The Array stays the same and I also don't get an error message.

Am I missing something? Can anyone help?

I noticed you accepted my answer (thank you). But if you solved the problem could you perhaps add an edit section to your question to explain what the problem was (since both JeanPaulA and myself think your code is correct but your data not correct). Thanks. — rmcsharry
– rmcsharry, Commented Mar 7, 2018 at 16:32

JeanPaul A. · Accepted Answer · 2018-03-07 09:31:07Z

1

The syntax which you are using is very much correct, and how it should be.

Here's a working plunker demonstrating exactly what you are doing.

Most probably the problem is related to the value of releaseDate that you are using to construct the Date object. What is the output of a console.log in the sort function?

answered Mar 7, 2018 at 9:31

JeanPaul A.

3,7341 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8818511 Over a year ago

The output is an Array of dates in the format like this one: 1520290800000

JeanPaul A. Over a year ago

That's very odd... it should work if the data is correct... Could you update your question with a sample of the data you are trying to sort?

rmcsharry · Accepted Answer · 2018-03-07 14:58:48Z

I updated the plunker that @JeanPaul A created so you can see the difference. In his plunker he is updating the array itself, not objects inside the array, so I think it needed updating.

If you look at the new plunker you can see the difference, but it does work, sorting the objects inside the array. I think there must be something wrong with your data. I added the DatePipe to format the dates so you can use this to easily see in the UI that your dates are correct.

Plunkr Code:

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="sort()">Sort</button>
      <ul>
         <li *ngFor="let date of dates">{{date | date: 'dd MM yyyy'}}</li>
      </ul>
      <ul>
         <li *ngFor="let customer of customers">
         {{customer.name}} -
         {{customer.releaseDate | date: 'dd MM yyyy'}}</li>
      </ul>      
    </div>
  `,
})
export class App {
  name:string;

  customers: Array<any> = [
    {"name": 'Mickey', "releaseDate": new Date('2012-07-12')},
    {"name": 'Minnie', "releaseDate": new Date('2013-07-12')},
    {"name": 'Donald', "releaseDate": new Date('2010-07-12')},
    {"name": 'Pluto', "releaseDate": new Date('2014-07-12')}
    ]

  dates:Array<Date> = [
    new Date('2012-07-12'),
    new Date('2013-07-12'),
    new Date('2010-07-12'),
    new Date('2014-07-12')
  ];
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  sort() {
    this.dates.sort((a:Date, b:Date) => new Date(a).getTime() - new Date (b).getTime());
    this.customers.sort((a: Customer, b: Customer) =>
      new Date(a.releaseDate).getTime() - new Date (b.releaseDate).getTime());
    console.log(this.customers);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

@JeanPaulA. Thanks, but I couldn't have done it without your code! :)

Collectives™ on Stack Overflow

Angular 4: Order By Array of Dates

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related