我如何使用Angular将从服务传来的数据按时间排序并转换为模型？

huangapple
go评论147阅读模式
英文:

How can I sort the data coming from the Service with Angular according to time and transfer it into a model?

问题

这是我在联系服务时接收到的数据。我想根据时间对这些数据进行排序，将其导入模型，然后在表格中向用户展示。我应该如何在Angular中完成这个任务？

这是我为接收到的数据设置的模型文件。

  1. export interface ResultsModel {
  2.     "result": string,
  3.     "createddate": string,
  4.     "clientid": string,
  5.     "id": number,
  6.     "clientusername": string,
  7. }

还有我的API请求函数。

  1. getAllResults() {
  2.     let apiEndpoint = "results";
  3.     this.httpRequestService.getApi(apiEndpoint, false).subscribe(resultRequest => {
  4.       console.log(resultRequest) 
  5.     })
  6. }
英文:

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?

  1. [
  2.     {
  3.         "id": 1,
  4.         "result": "string",
  5.         "ownername": "string",
  6.         "clientid": "string",
  7.         "createddate": "2023-01-07T15:44:50.408568",
  8.         "clientusername": "string",
  9.     },
  10.     {
  11.         "id": 2,
  12.         "result": "string",
  13.         "ownername": "string",
  14.         "clientid": "string",
  15.         "createddate": "2023-01-07T15:44:50.408568",
  16.         "clientusername": "string",
  17.     },
  18.     {
  19.         "id": 3,
  20.         "result": "string",
  21.         "ownername": "string",
  22.         "clientid": "string",
  23.         "createddate": "2023-01-07T15:44:50.408568",
  24.         "clientusername": "string",
  25.     },
  26.     {
  27. 		"id": 4,
  28.         "result": "string",
  29.         "ownername": "string",
  30.         "clientid": "string",
  31.         "createddate": "2023-01-07T15:44:50.408568",
  32.         "clientusername": "string",
  33.         
  34.     }
  35. ]

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

  1. export interface ResultsModel {
  2.     "result": string,
  3.     "createddate": string,
  4.     "clientid": string,
  5.     "id": number,
  6.     "clientusername": string,
  7.     
  8. }

And this is my API Request function

  1. getAllResults() {
  2.     let apiEndpoint = "results"
  3.     this.httpRequestService.getApi(apiEndpoint, false).subscribe(resultRequest => {
  4.       console.log(resultRequest) 
  5.       
  6.     })

答案1

得分: 0

首先，您可以通过解析响应并执行类似以下操作来对其进行排序：

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

然后，您可以将数据插入到表格中，可以像这样：

  1. <table>
  2.   <thead>
  3.     <tr>Id</tr>
  4.     ...
  5.     ..
  6.     .
  7.   </thead>
  8.   <tbody>
  9.     <tr *ngFor="let post of response">
  10.       <td>{{ post.id }}</td>
  11.       <td>{{ post.result }}</td>
  12.       ...
  13.       ..
  14.       .
  15.     </tr>
  16.   </tbody>
  17. </table>

或者使用 Angular Material Table 组件（https://material.angular.io/components/table/overview）。

英文:

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

  1. response.sort((a, b) =&gt; {
  2.   return new Date(a.createddate).getTime() - new Date(b.createddate).getTime()
  3. })

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

  1. &lt;table&gt;
  2.   &lt;thead&gt;
  3.     &lt;tr&gt;Id&lt;/tr&gt;
  4.     ...
  5.     ..
  6.     .
  7.   &lt;/thead&gt;
  8.   &lt;tbody&gt;
  9.     &lt;tr *ngFor=&quot;let post of response&quot;&gt;
  10.       &lt;td&gt;{{ post.id }}&lt;/td&gt;
  11.       &lt;td&gt;{{ post.result }}&lt;/td&gt;
  12.       ...
  13.       ..
  14.       .
  15.     &lt;/tr&gt;
  16.   &lt;/tbody&gt;
  17. &lt;/table&gt;

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

huangapple
  • 本文由 发表于 2023年1月9日 05:49:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/75051544.html
  • angular
  • data-binding
  • json
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定