Angular2 rxjs sort (observable) list of objects by an observable field

Question

I want to sort a list of things by an observable field, but can't wrap my head around observables to get this working. Has somebody an idea how to achieve this?

The initial situation is something like the following:

Thing[] things;

interface Thing {
  name: Observable<string>
}

<ul>
  <li *ngFor="const thing for things">
    {{thing.name | async}}
  </li>
</ul>

Since I obviously haven't described my problem properly: The field I want to sort the list of things on is an Observable, not a plain string. I want to keep the field updated via websockets so to detect the changes properly I have to use an Observable field on which I can subscribe.

What's the idea behind having name as an Observable? I think you want to leave that property as a normal string — Fredrik Lundin, Feb 13 '17 at 13:19
I want to use the field as an observable, since it's value may change at runtime. — sclausen, Feb 14 '17 at 07:11
Phosphoros, you are neither subscribing to the `name` or a `Thing`, but to the list of things (`Observable`) — Fredrik Lundin, Feb 14 '17 at 07:13
Yes, you're right, that's a real mistake. The abstraction of my usecase is wrong. — sclausen, Feb 14 '17 at 08:18

AngularChef · Accepted Answer · 2017-02-15T14:27:47.000

Thanks for clarifying the question, Phosphoros. :)

Here's how you could do what you asked:

// Function to compare two objects by comparing their `unwrappedName` property.
const compareFn = (a, b) => {
  if (a.unwrappedName < b.unwrappedName)
    return -1;
  if (a.unwrappedName > b.unwrappedName)
    return 1;
  return 0;
};

// Array of Thing objects wrapped in an observable.
// NB. The `thing.name` property is itself an observable.
const thingsObs = Observable.from([
  { id: 1, name: Observable.of('foo') },
  { id: 2, name: Observable.of('bar') },
  { id: 3, name: Observable.of('jazz') }
]);

// Now transform and subscribe to the observable.
thingsObs

  // Unwrap `thing.name` for each object and store it under `thing.unwrappedName`.
  .mergeMap(thing =>
    thing.name.map(unwrappedName => Object.assign(thing, {unwrappedName: unwrappedName}))
  )

  // Gather all things in a SINGLE array to sort them.
  .toArray()

  // Sort the array of things by `unwrappedName`.
  .map(things => things.sort(compareFn))

  .subscribe();

Logging emitted values to the console will show an array of Thing objects sorted by their unwrappedName property:

[
  { id: 2, name: ScalarObservable, unwrappedName: "bar" },
  { id: 1, name: ScalarObservable, unwrappedName: "foo" },
  { id: 3, name: ScalarObservable, unwrappedName: "jazz" }
]

Please let me know if you have questions about this code.

Awesome, many thanks! This example didn't worked though (without throwing an error!), because compareFn must be declared before usage. — sclausen, Feb 15 '17 at 14:16
You're welcome. I'll reorganize the code starting with the `compareFn` declaration. — AngularChef, Feb 15 '17 at 14:28
@AngularChef I am faced with a very similar issue, but my sorting must be the result of the user clicking a button to sort the data already on the page. How would you sort this on a button click? — Chris22, Aug 24 '18 at 19:31

score 16 · Answer 2 · answered Feb 14 '17 at 09:49

16

If I understand you correctly, you want to have an object that looks like this:

Thing {
   name: string;
}

You then have want to have an Observable that holds on array of Thing:

things$: Observable<Thing[]>;

You then want to sort your things in the thing array by a property, in this case name. That could be done like this:

...

let sorted$: Observable<Thing[]> = things$.map(items => items.sort(this.sortByName))

...

sortByName(a,b) {
  if (a.name < b.name)
    return -1;
  if (a.name > b.name)
    return 1;
  return 0;
}

...

And then finally, like Toung Le showed in his answer, change your template like this:

<ul>
  <li *ngFor="let thing of sorted$ | async">
    {{thing.name}} <!--No need async pipe here. -->
  </li>
</ul>

answered Feb 14 '17 at 09:49

Fredrik Lundin

8,006
1
29
35

Many thanks for the extensive answer, but the name field I want to sort on isnt a string, but an Observable, since this field may be changed in the database and will then be updated automatically. – sclausen Feb 14 '17 at 21:36
@Phosphoros, hmm, that still sounds weird to me. Can you maybe update your question to show us how the data you are working on looks? – Fredrik Lundin Feb 15 '17 at 12:57
@FredrikLundin, (noob here) where do you put the code that you are declaring the method variable `sorted$`? In the `component.ts`? I want to call that method using a button click `` (if that's possible written as you have it). – Chris22 Aug 24 '18 at 20:01

score 5 · Answer 3 · answered Feb 13 '17 at 12:29

5

You can use Observable.map. For example:

Observable<Thing[]> things;
sortedThings$ = things.map(items => items.sort()) // Use your own sort function here.

In your template:

<ul>
  <li *ngFor="let thing of sortedThings$ | async">
    {{thing.name}} <!--No need async pipe here. -->
  </li>
</ul>

answered Feb 13 '17 at 12:29

Tuong Le

18,533
11
50
44

Unfortunately, this isn't helpful, since I'm interested in this nitty gritty detail, how to sort on an observable field. – sclausen Feb 13 '17 at 12:31
@Phosphoros. Your comment is not very clear. To me it looks like Tuong Le has answered exactly the question that you asked. Be more specific if you think his answer doesn't do the trick. – AngularChef Feb 13 '17 at 13:13
@AngularFrance "I want to sort a list of things by an observable field […]" isn't this clear enough? The observable field to sort on is the problem. – sclausen Feb 14 '17 at 07:06
6

Well, repeating the question verbatim doesn't make it any clearer. Also, keep in mind everyone on here is offering their time and knowledge to try to help you. If some of us don't understand the question as it is, it'll be more helpful to offer clarification even though it might already seem crystal clear to you. – AngularChef Feb 14 '17 at 08:41
Works like a charm. Thanks! Here's the link to docs on the sort function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort – Otziii Mar 25 '18 at 18:13

score 3 · Answer 4 · answered Jul 11 '18 at 15:30

3

You can use Observable.map then sort() with localeCompare which would look something like this :

.map(data => ({
        label: data.name
}))
.sort((a, b) => a.label.localeCompare(b.label));

answered Jul 11 '18 at 15:30

Laurie Clark

610
7
10

score 2 · Answer 5 · answered Dec 16 '20 at 10:14

It is a pretty simple solution, once you understand how .pipe works and which Operators are there.

If we convert all items to an array using toArray operator and pipe the whole array as a single item to mergeMap operator, where we'll be able to sort it and then breaks out the array back.

interface Thing {
  name: string;
}

const things: Observable<Thing>;

...

things
   .pipe(toArray())
   .pipe(mergeMap(_things => 
      _things.sort((a, b) => 
         a.name.localeCompare(b.name)
      )
   ));

// OR

things.pipe(toArray(), mergeMap(_things => 
   _things.sort((a, b) => 
      a.name.localeCompare(b.name)
   )
));

score 1 · Answer 6 · answered Jun 03 '18 at 19:45

1

Use groupby operator (play with it):

const $things = getThings();

$things.pipe(
    groupBy(thing => thing.id),
    mergeMap(group$ => group$.pipe(
        reduce((acc, cur) =>[...acc, cur], [])
    ))
)
.subscribe(console.log)

Groupby docs.

answered Jun 03 '18 at 19:45

Luillyfe

6,183
8
36
46

score 0 · Answer 7 · answered Apr 20 '21 at 10:26

0

Changed the sort function with a filter function also made it work with rxjs 6.6.2

https://stackblitz.com/edit/rxjs-ys7a9m?file=index.ts

answered Apr 20 '21 at 10:26

null canvas

10,201
2
15
18

Angular2 rxjs sort (observable) list of objects by an observable field

7 Answers7

Linked