可观察的异步过滤器使用 RxJs 在 Angular 5 中按日期字段对 json 响应进行排序

Question

Observable is capturing an API response looks like below json.

[
  {
    "name": "Vijay",
    "effectivedate": "2018-02-08T15:04:46.000Z",
    "expirationdate": "2018-02-22T15:04:46.000Z"
  },
  {
    "name": "Thulasi",
    "effectivedate": "2018-01-23T04:42:33.000Z",
    "expirationdate": "2018-01-30T04:42:33.000Z"
  },
  {
    "name": "Robert",
    "effectivedate": "2018-01-22T18:42:30.000Z",
    "expirationdate": "2018-01-28T18:42:30.000Z"
  },
  {
    "name": "Pakkiyaraj",
    "effectivedate": "2018-02-12T09:04:47.000Z",
    "expirationdate": "2018-02-28T08:48:58.000Z"
  },
  {
    "name": "Violet",
    "effectivedate": "2018-02-20T11:51:27.221Z",
    "expirationdate": "2018-02-22T11:49:37.000Z"
  }
]

TypeScript file has the API call and managing the observable to the resonse data.

 this.gridResult$ = this.http.get(`**URL HERE**`)
    .map((result: any[]) => {
      return result;
    }, (err) => {
      console.log(err);
      this.error.error(err);
    });

And My HTML has this snippet.

<tr *ngFor="let result of gridResult$ | async">
    <td>{{result.name}}</td>
</tr>

I need to sort the json response into the table with date sorting for effectivedate . Please let me know if any filter can be used in RxJs.

Answer 1

With help of lodash and moment you can do it like this :

var sortedData = _.sortBy(names, function(o) { return  
    moment(o.effectivedate); 
}).reverse();

//OR (With ES6 way)

var sortedData = _.sortBy(names,(o) => moment(o.effectivedate) ).reverse();

 var names = [ { "name": "Vijay", "effectivedate": "2018-02-08T15:04:46.000Z", "expirationdate": "2018-02-22T15:04:46.000Z" }, { "name": "Thulasi", "effectivedate": "2018-01-23T04:42:33.000Z", "expirationdate": "2018-01-30T04:42:33.000Z" }, { "name": "Robert", "effectivedate": "2018-01-22T18:42:30.000Z", "expirationdate": "2018-01-28T18:42:30.000Z" }, { "name": "Pakkiyaraj", "effectivedate": "2018-02-12T09:04:47.000Z", "expirationdate": "2018-02-28T08:48:58.000Z" }, { "name": "Violet", "effectivedate": "2018-02-20T11:51:27.221Z", "expirationdate": "2018-02-22T11:49:37.000Z" } ]; var sortedData = _.sortBy(names, function(o) { return moment(o.effectivedate); }) .reverse(); console.log(sortedData); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js"></script> 

Answer 2

You could use standard Javascript sorting in rxjs map directly like following:

this.gridResult$ = this.http.get(`**URL HERE**`).pipe(
  map(result => result.sort((a, b) => a.value - b.value)) // you do your sorting here
);

and it will return observable