Sort Array by Date (Newest first) in Angular

Question

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" class="img-fluid w-100 mb-3" alt="">
    <p class="para-heading">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 class="para">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" class="img-fluid w-100 mb-3" alt="">
    <br>
    <blockquote class="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 class="para">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 class="para">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 class="para">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" class="img-fluid w-100 mb-3" alt="">
    <p class="para">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 class="para">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 class="news-section">
    <div class="row d-flex my-2">
        <div class="col d-flex justify-content-evenly py-3 px-5">
            <div class="card-group justify-content-evenly">
                <div *ngFor="let news of newsList">
                    <a [routerLink]="news.postLink">
                        <div class="card border rounded shadow thumbnail"><img class="card-img-top w-100 d-block thumbnail-img" [src]="news.thumbnail" />
                            <div class="card-body">
                                <h6 class="card-title">{{ news.title }}</h6>
                                <div class="row g-0">
                                    <div class="col-auto"><img class="blogger" [src]="news.author.photo"></div>
                                    <div class="col align-self-center p-1 author-details">
                                        <h6 class="m-0 author-details__name">{{ news.author.name }}</h6>
                                        <p class="author-details__date">{{ news.author.date }} * {{ news.readTime }} min read</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a> 
                </div>
            </div>
        </div>
    </div>

Does this answer your question? How to sort an object array by date property? — A1exandr Belan
– A1exandr Belan, Commented Apr 4, 2022 at 5:21

Reza Mahmoodi · Accepted Answer · 2022-04-04 04:50:44Z

2

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;
});

answered Apr 4, 2022 at 4:50

Reza Mahmoodi

8267 silver badges9 bronze badges

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

1 Comment

MaartenDev Over a year ago

return dt1 - dt2 would yield the same result

RGA · Accepted Answer · 2022-04-04 08:17:36Z

0

You can try this,

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

answered Apr 4, 2022 at 8:17

RGA

3134 silver badges12 bronze badges

Collectives™ on Stack Overflow

Sort Array by Date (Newest first) in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related