How to filter an Observable array in angular based on a value

Question

Im requesting a web service and receiving an observable and loop them to build another array of objects like below.

export interface Seller {
  email?:String;
  isOnline?:boolean;
  name?:String;
}

Angular Component :

sellers: Observable<Seller[]>;

constructor(firestore: AngularFirestore) {
    this.sellers = firestore.collection('sellers').valueChanges();
 }

getSllers(){
    return this.sellers;
 }

Using these sellers Observable im creating an array of objects.

getSellerDetails() {
    return this.getSllers().pipe(
        map(sellers => {
        sellers.filter(seller => seller.isOnline == true)
         return sellers.map(seller => {
            return {
                name: seller.name,
                isOnline: seller.isOnline,
                email: seller.email
            }
        });
    })); 
 }

And here i want to filter out the sellers only who are having isOnline true. The snippet im having seems not working. What would be the best approach?

You have a mistake in your map callback. You are not doing anything with the array returned by the Array.filter method called on sellers. — Mikkel Christensen
– Mikkel Christensen, Commented May 31, 2021 at 18:32
is selleers=sellers.filter(seller => seller.isOnline == true) -a filter of array return a new array but not change the original array- — Eliseo
– Eliseo, Commented May 31, 2021 at 18:46

noririco · Accepted Answer · 2024-03-25 07:18:21Z

5

getSellerDetails() {
    return this.getSllers().pipe(
        // Filter only sellers that isOnline
        map(sellers => sellers.filter(seller => seller.isOnline == true)),
        // Map all filtered sellers to the wanted interface
        map(sellers => {
            return sellers.map(seller => {
              return {
                name: seller.name,
                isOnline: seller.isOnline,
                email: seller.email
              }
           });
        })
      )
 }

Also can be simplify with:

getSellerDetails() {
    return this.getSllers().pipe(
        // Filter only sellers that isOnline
        map((sellers) => sellers.filter((s) => s.isOnline)),
        // Map all filtered sellers to the wanted interface
        map((sellers) => sellers.map(s => ({
           name: s.name,
           isOnline: s.isOnline,
           email: s.email
        })),
 }

edited Mar 25, 2024 at 7:18

answered May 31, 2021 at 19:01

noririco

8157 silver badges15 bronze badges

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

Comments

AliF50 · Accepted Answer · 2021-05-31 18:34:26Z

1

Mikkel is right. I think you mean to do:

return sellers
 // filter the array
 .filter(selller => seller.isOnline === true)
 // map the filtered array
 .map(seller => {
  return {
    name: seller.name,
    isOnline: seller.isOnline,
    email: seller.email,
  };
});

answered May 31, 2021 at 18:34

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Comments

Quang Nhật · Accepted Answer · 2021-06-14 01:10:48Z

0

getSellerDetails() {
    return this.getSllers().pipe(
        map(sellers => 
         sellers
         .filter(seller => seller.isOnline)
         .map(seller => {
            return {
                name: seller.name,
                isOnline: seller.isOnline,
                email: seller.email
            }
        })
    )); 
 }

It looks like you didn't use seller filter result for mapping. Try this!

answered Jun 14, 2021 at 1:10

Quang Nhật

515 bronze badges

Collectives™ on Stack Overflow

How to filter an Observable array in angular based on a value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related