how to display the data per hour ago in angular

Question

here's the code:

data = [
    {
        'name' : 'sample'
        'date' : '2020-02-18 13:50:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 13:20:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 13:12:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 13:13:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 12:50:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 11:50:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 07:50:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 01:50:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 01:30:01'
    },
    {
        'name' : 'sample'
        'date' : '2020-02-18 01:20:01'
    },
]

expected output:

 data = [
        {
            'name' : 'sample'
            'date' : '2020-02-18 13:50:01'
        },
        {
            'name' : 'sample'
            'date' : '2020-02-18 12:50:01'
        },
        {
            'name' : 'sample'
            'date' : '2020-02-18 11:50:01'
        },
        {
            'name' : 'sample'
            'date' : '2020-02-18 07:50:01'
        },
    ]

what I want to do here is to display the data per hour. the data will filter like this.

data = [
            {
                'name' : 'sample'
                'date' : '2020-02-18 13:50:01'
            },
            {
                'name' : 'sample'
                'date' : '2020-02-18 12:50:01'
            },
            {
                'name' : 'sample'
                'date' : '2020-02-18 11:50:01'
            },
            {
                'name' : 'sample'
                'date' : '2020-02-18 07:50:01'
            },
        ]

it will not get the other data not hour ago. if the data is last 30minutes it will not get/display. the data should be last hour ago, data should be per hour ago. it should be dynamic. because if there's a new data which is date: 2020-02-18 14:00:01, then per hour ago:

2020-02-18 14:00:01,

2020-02-18 13:00:01,

2020-02-18 12:00:01, etc...

here's the code: https://stackblitz.com/edit/angular-dnbses?file=src/app/app.component.ts

Answer 1

If you want to group by year , month , day and hour :

const result = data.reduce((a, { name, date }) => {
    let currentDate = new Date(date);
    let dateHour = currentDate.getFullYear() + '/' + currentDate.getMonth()  
        + '/' +  currentDate.getDate()  + '/' +  currentDate.getHours();
    a[dateHour] = a[dateHour] || {name, date};
    return a;
}, {})

An example:

 let data = [ { 'name' : 'sample', 'date' : '2020-02-18 13:50:01' }, { 'name' : 'sample', 'date' : '2020-02-18 13:20:01' }, { 'name' : 'sample', 'date' : '2020-02-18 13:12:01' }, { 'name' : 'sample', 'date' : '2020-02-18 13:13:01' }, { 'name' : 'sample', 'date' : '2020-02-18 12:50:01' }, { 'name' : 'sample', 'date' : '2020-02-18 11:50:01' }, { 'name' : 'sample', 'date' : '2020-02-18 07:50:01' }, { 'name' : 'sample', 'date' : '2020-02-18 01:50:01' }, { 'name' : 'sample', 'date' : '2020-02-18 01:30:01' }, { 'name' : 'sample', 'date' : '2020-02-18 01:20:01' }, ] const result = data.reduce((a, { name, date }) => { let currentDate = new Date(date); let dateHour = currentDate.getFullYear() + '/' + currentDate.getMonth() + '/' + currentDate.getDate() + '/' + currentDate.getHours(); a[dateHour] = a[dateHour] || {name, date}; return a; }, {}) console.log(Object.values(result));

Answer 2

Here I've created a GetDataForHour(dataArray, dateToCompare) function which might be the answer. It filters the dataArray and returns only array entities having dates before the dateToCompare with the same minutes and seconds

https://stackblitz.com/edit/angular-rzzkfq