Sorting list array from firebase database

Question

again I need a bit of help from you people:-)!

I want to sort data in *ngFor by value "finished"

I get my data with :

 this.db.list(`/avatars/`).valueChanges().subscribe(d => {
      this.avatarhall = d;

and show it in html like this:

 <div *ngFor="let to of avatarhall; let i = index">
      <ion-list>
          <ion-item>
            <ion-thumbnail item-start>
              <img src="../assets/ghosts/{{to.avatar}}">
            </ion-thumbnail>
            <h1> {{to.monstername}}</h1>
            <p>Finished Tasks:{{to.finished}}</p>
            <ion-icon name="star" item-end>{{i +1}}</ion-icon>
          </ion-item>
        </ion-list>

  </div>

My pipe is created but I don't know how to sort it by the value of finished:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderbytask',
})
export class OrderbytaskPipe implements PipeTransform {

  transform(value: any[], args:string):any[] {

    return value.sort();
  }
}

In real, this is a part of app where you can check your position on the ladder

alt255 · Accepted Answer · 2018-02-25 12:11:43Z

1

You can use javascript built in sort function.

 this.db.list(`/avatars/`).valueChanges().subscribe(d => {
      this.avatarhall = d.sort((a,b) => a.finished - b.finished);

You can find documentation of sort at mdn

answered Feb 25, 2018 at 12:11

alt255

3,6262 gold badges17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

josip Over a year ago

I am getting back property 'finished' does not exists on type '{}'.

alt255 Over a year ago

try (a as any).finished - (b as any).finished

josip · Accepted Answer · 2018-02-25 20:46:51Z

1

I made it by doing :

this.db.list(`/avatars/`).valueChanges().subscribe(d => {

  this.avatarhall = d.sort((a,b) => (a as any).finished - (b as any).finished).reverse();

    });

hope someone will find this to be useful. Also, thanks @alt255 for link and starting idea that helped me to figure it out!

edited Feb 25, 2018 at 20:46

answered Feb 25, 2018 at 13:23

josip

1672 silver badges12 bronze badges

2 Comments

alt255 Over a year ago

I took out time to help you with your problem and you changed the accepted answer. very uncool!!

josip Over a year ago

Sorry if there is misunderstanding, I changed vote from my post to your post today and marked it as accepted answer because you helped me and it was your idea that made app working. I am not sure why it didn't work the first time so i just now checked your post again.

Rahul · Accepted Answer · 2020-03-29 19:44:23Z

1

while working with Angular fire version 5.4.2 and Angular 8 project, I had to use below syntax. Need to pass parameter as QueryFn -

CategoryService.ts

getCategories():AngularFireList<any[]>{
return this.afDatabase.list('/categories', ref=>ref.orderByChild('name'));

}

and while calling getCategories method inside component -

Component.ts

constructor(private categoryService: CategoryService) {
categoryService.getCategories().valueChanges().subscribe(items => {
  this.categories = items;
});

}

Hope! it will work. Thanks

answered Mar 29, 2020 at 19:44

Rahul

1,1832 gold badges13 silver badges24 bronze badges

Comments

Akber Iqbal · Accepted Answer · 2022-03-21 04:27:05Z

0

this.db.list('/avatars/').valueChanges().subscribe(d => { this.avatarhall = d.reverse() });

I hope this will work

edited Mar 21, 2022 at 4:27

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

answered Mar 20, 2022 at 13:10

Ajay K

11 bronze badge

Collectives™ on Stack Overflow

Sorting list array from firebase database

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related