How do you sort an Observable<Item[]> in Angular 6 with rxjs 6?

typescript angular6 rxjs6
djangojazz picture djangojazz · May 10, 2018 · Viewed 17.5k times · Source

I just want to sort data on an observable of my class type 'Category'. So Observable < Category[] > I want to sort.

So I upgraded to Angular6 and rxjs6 with it. One issue that is probably simple Typescript that I do know is how do I just do a 'sort' operation like:

sort((x,y) => x.description < y.description ? -1 : 1)

Inside of the new Angular6? I used to do this in 5

var response = this.http.get<Category[]>(this.endpoint);
        .map((result: Response) => this.alphabetize(result));


alphabetize = (result: Response) => this.Categories = result.json()
.sort((x,y) => x.description < y.description ? -1 : 1)

And it worked fine. Now in the HttpCLIENTModule and HttpClient that Angular wants you to use it is simpler:

var data = this.http.get<Category[]>(this.endpoint);

I just put the magic <(object)> before my endpoint and it does it for me. Cool. But I am not seeing how you get inside the object easily to sort from it with Source, Pipe, from, of. I know it is probably something simple I just don't know the syntax for.

Answer

Estus Flask picture Estus Flask · May 10, 2018

It is:

this.http.get<Category[]>(this.endpoint).pipe(
  map(results => results.sort(...))
);

Or since sort modifies existing array, it's more semantically correct to provide side effects in do/tap:

this.http.get<Category[]>(this.endpoint).pipe(
  tap(results => {
    results.sort()
  })
);

Related questions

Angular - "has no exported member 'Observable'"

Typescript code: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } getHeroes(): Observable<Hero[]&…

Read More
Angular 6 router.events.filter 'filter' does not exist on type 'Observable<Event>'

I have finished to update my App to Angular 6 (it was in 5.2 version). I got an error syntax in : import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { filter } from 'rxjs/operators'; ... constructor(private router: Router) {} this.router.events.filter (…

Read More
Angular 6 View is not updated after changing a variable within subscribe

Why is the view not being updated when a variable changes within a subscribe? I have this code: example.component.ts testVariable: string; ngOnInit() { this.testVariable = 'foo'; this.someService.someObservable.subscribe( () => console.log('success'), (error) => console.log('error', …

Read More