How can I sort the data coming from the Service with Angular according to time and transfer it into-CodePudding

This is the data I received in the response when I contacted the service. I want to sort this data according to time, import it into a model, and then show it to users in a table. How can I do this with Angular?

[
    {
        "id": 1,
        "result": "string",
        "ownername": "string",
        "clientid": "string",
        "createddate": "2023-01-07T15:44:50.408568",
        "clientusername": "string",
    },
    {
        "id": 2,
        "result": "string",
        "ownername": "string",
        "clientid": "string",
        "createddate": "2023-01-07T15:44:50.408568",
        "clientusername": "string",
    },
    {
        "id": 3,
        "result": "string",
        "ownername": "string",
        "clientid": "string",
        "createddate": "2023-01-07T15:44:50.408568",
        "clientusername": "string",
    },
    {
        "id": 4,
        "result": "string",
        "ownername": "string",
        "clientid": "string",
        "createddate": "2023-01-07T15:44:50.408568",
        "clientusername": "string",
        
    }
]

This is the model file I set up for the incoming data.

export interface ResultsModel {
    "result": string,
    "createddate": string,
    "clientid": string,
    "id": number,
    "clientusername": string,
    
}

And this is my API Request function

getAllResults() {
    let apiEndpoint = "results"
    this.httpRequestService.getApi(apiEndpoint, false).subscribe(resultRequest => {
      console.log(resultRequest) 
      
    })

CodePudding user response：

Firstly, you can sort the response by parsing it and then doing something like this:

response.sort((a, b) => {
  return new Date(a.createddate).getTime() - new Date(b.createddate).getTime()
})

Then you can just plug the data into a table either like this:

<table>
  <thead>
    <tr>Id</tr>
    ...
    ..
    .
  </thead>
  <tbody>
    <tr *ngFor="let post of response">
      <td>post.id</td>
      <td>post.result</td>
      ...
      ..
      .
    </tr>
  </tbody>
</table>

Or use the angular material Table component (https://material.angular.io/components/table/overview)