How to sort by date from an API call with a object array JSON in Angular/Ionic?

Question

I have JSON object with dates. The structure of this JSON looks like this:

{
    "dates": [
        [
            1660834227864
        ],

        [
            1660883117638
        ],
        [
            1660883397773
        ]
    ]
}

These are my dates data and I want to sort it by the most recent date above. I use the 'date' pipe to format these dates and this is working fine. When I load the date data into my app the most recent date is below instead of above.

I use PrimeNG table to display my data and this is my code in typescript.

import { Component, OnInit } from '@angular/core';
import { DateService } from 'src/app/api/date.service';

@Component({
  selector: 'app-tableview',
  templateUrl: './tableview.component.html',
  styleUrls: ['./tableview.component.scss'],
})
export class TableviewComponent implements OnInit {

  datedata: any;
  first = 0;
  rows = 10;

  constructor(private dateService: DateService) {

  }

  ngOnInit() {
    this.dateService.getDates().subscribe(response => {
      this.datedata = response.dates;
      //sort logic here

    })
  }

  next() {
    this.first = this.first + this.rows;
  }

  prev() {
    this.first = this.first - this.rows;
  }

  reset() {
    this.first = 0;
  }

  isLastPage(): boolean {
    return this.datedata ? this.first === (this.datedata.length - this.rows) : true;
  }

  isFirstPage(): boolean {
    return this.datedata ? this.first === 0 : true;
  }


}

Then I bind the data like this:

<div class="card">
    <p-table styleClass="p-datatable-striped" responsiveLayout="scroll" [value]="datedata" [paginator]="true"
        [rows]="rows" [showCurrentPageReport]="true" [(first)]="first">
        <ng-template pTemplate="header">
            <tr>
                <th>Date</th>=
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data>
            <tr>
                <td>{{data[0] | date: 'medium'}}</td>                
            </tr>
        </ng-template>
    </p-table>
</div>

The date data is working great and I can see the formated dates in my table. The problem I don't get the recent date above. So I have tried the sort method from PrimeNG but it didn't work.

Second method I have tried is the following stackoverflow post:

Angular 6 Sort Array of object by Date

This is exactly what I want but the problem is I have a different JSON structure.

How can I sort the fetched data so that the most recent date is shown in the table?

score 1 · Answer 1 · answered Aug 19 '22 at 17:08

1

let dates = [
  [
      1660883117638
  ],

  [
      1660834227864
  ],
  [
      1660883397773
  ]
]

let datesWithoutArray = dates.map((elem) => {
  return elem[0]
});

let datesSorted = sortArray(datesWithoutArray);

function sortArray(arr) {
  return arr.sort((a, b) => a - b);
}

answered Aug 19 '22 at 17:08

Rafael Lopes

463
3
8

Hello! Thanks for your time. I have tried your solution by //sort logic but still get the oldest date above. – Fearcoder Aug 19 '22 at 17:22
If you want the reverse order, you must reverse the Sort logic. ```return arr.sort((a, b) => b - a);``` – Rafael Lopes Aug 19 '22 at 17:48

score 0 · Accepted Answer · answered Oct 01 '22 at 12:52

0

I have a solution like this and works!

ngOnInit() {
    this.dateService.getDates().subscribe(response => {
      this.datedata = response.dates.sort((b, a) => a[0] - b[0]);
    })
  }

answered Oct 01 '22 at 12:52

Fearcoder

753
3
15
47

How to sort by date from an API call with a object array JSON in Angular/Ionic?

2 Answers2