Sort Array by Date (Newest first) in Angular-CodePudding

I am new to angular js and I would like to sort my array of events by date. Newer events first then older. I have a separate array file for the events.

Here is my array file, newsList.ts

export const newsList = [
{
    title:'FilPass Holds Talk on Construction new Technology',
    author: {
        name: 'Hazel Chua',
        date: 'June 3, 2021',
    },
    readTime: 7,
    innerHTML: `<img src="../../../../assets/img/Newsroom/bloger.jpg"  alt="">
    <p >FilPass Tamperproof Tech Inc. launched on July 23 the Industry-Academe Linkage for Construction Series in pursuit of introducing its flagship project, the Construction Industry One Registry System or CIORS, to the Philippine construction industry, academe, and non-profit organizations.</p>
    <p >As part of the 4-part series, FilPass will be holding a panel discussion titled, “Industry Academe Linkage for Construction Series: How the Construction Industry Adapts to New Technologies”, taking place on August 18, 2021, from 10:00 A.M. to 11:30 A.M. via AirMeet and streamed live on FilPass’ Facebook page.</p>
    <img src="../../../../assets/img/Newsroom/fpp-2.png"  alt="">
    <br>
    <blockquote ><p>The event will also serve as a mass memorandum of agreement signing for FilPass’ CIORS ambassadors, partners from the construction industry and academe, different partner merchants, and media partners.</p></blockquote>
    <p >It will be graced by esteemed trailblazers of the Philippine construction industry namely Engr. Jomel Molabola of Engineering Wins PH, Engr. Ralp Rivas of @itsaralp, Civil Engr. Samuel Pacba of the Technological University of the Philippines, and Gaze Kasilag-Del Castillo, Chair and President of FilPass.</p>
    <p >The event will also serve as a mass memorandum of agreement signing for FilPass’ CIORS ambassadors, partners from the construction industry and academe, different partner merchants, and media partners.</p>
    <p >Adding to that, FilPass ID holders, particularly CIORS signees, will get to enjoy exciting discounts and vouchers from five and counting partner merchants to be presented on the event. Meanwhile, a raffle contest is currently happening over FilPass’ Facebook page where different cash prizes await three special winners.</p>
    <img src="../../../../assets/img/Newsroom/fp-3.jpeg"  alt="">
    <p >If you are a student, worker, and professional related in the field of construction, you may still register for the event by heading over to this link: <a href="https://rfr.bz/f36c40p">https://rfr.bz/f36c40p </a></p>
    <p >Watch out for more virtual events FilPass has in store for you! Follow FilPass on their social media pages Facebook and Instagram to stay updated.</p>`,
    postLink: ['/news-article', 'FilPass Holds Talk on Construction new Technology'.toLowerCase().split(' ').join('-')],
    paramLink: 'FilPass Holds Talk on Construction new Technology'.toLowerCase().split(' ').join('-'),
    thumbnail: '../../../../assets/img/cropBlog4.jpg'
},

This is my JS file where I will put the sortEvents() function:

import { Component, OnInit } from '@angular/core';
import { newsList } from 'src/app/constants/newsList';
@Component(
{ 
   selector: 'app-all-news-page',
   templateUrl: './all-news-page.component.html',
   styleUrls: ['./all-news-page.component.scss']
})

export class AllNewsPageComponent implements OnInit {
   newsList:any;
   constructor() { }

ngOnInit(): void {
this.newsList = newsList;
}

sortDate() {
   //INSERT CODE HERE
}}

This is my HTML file:

   <div >
    <div >
        <div >
            <div >
                <div *ngFor="let news of newsList">
                    <a [routerLink]="news.postLink">
                        <div ><img  [src]="news.thumbnail" />
                            <div >
                                <h6 >{{ news.title }}</h6>
                                <div >
                                    <div ><img  [src]="news.author.photo"></div>
                                    <div >
                                        <h6 >{{ news.author.name }}</h6>
                                        <p >{{ news.author.date }} * {{ news.readTime }} min read</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a> 
                </div>
            </div>
        </div>
    </div>

CodePudding user response：

Override sort function, parse Date and compare it

this.newsList.sort((a,b)=>{
    const dt1 = Date.parse(a.author.date);
    const dt2 = Date.parse(b.author.date);

    if (dt1 < dt2) return 1;
    if (dt1 > dt2) return -1;
    return 0;
});

CodePudding user response：

You can try this,

console.log(this.newsList.sort((a,b) => Date.parse(b.author.date) - Date.parse(a.author.date)));