How can I filter an observable array?

Question

I'm trying to filter an array of strings from db firebase by clicking on button and calling method to filter. My problem is that nothing is happening.

What am I doing wrong ?

service

images: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
   this.images = this.db.list("/images").valueChanges();

  }

component

images: Observable<any[]>;

  constructor(private firebase: FirebaseService) {
    this.images = firebase.images;

  }

  loadImages(category: string) {
    return this.images.subscribe(x => x.filter(x => x === category))
  }

html

<button (click)="loadImages(image1)" >Filter</button>
  <div *ngFor="let image of images | async">
    <h2>{{image}}</h2>

  </div>

firebase db:

[image1, image2, image3, image4] - only for test

MGXKA · Accepted Answer · 2018-08-01 16:23:59Z

You can use an Observable with the map operator to display the data. Refer to this stackblitz, I replaced the database retrieval with an Observable containing an array of strings for demonstration purposes:

https://stackblitz.com/edit/load-and-filter-from-service

service:

retrieveImages(): Observable<any> {
  // replace with firebase call this.db.list("/images").valueChanges();
  return of(['image1', 'image2', 'image3', 'image4']);
}

component:

public images$: Observable<any>;

constructor(private firebase: FirebaseService) {
  ;
}

ngOnInit() {
  this.loadImages('image1');
}

loadImages(category: string) {
  this.images$ = this.firebase.retrieveImages().pipe(
    map(x => x.filter(x => x === category))
  );
}

html:

<button (click)="loadImages('image1')" >Filter 1</button>
<button (click)="loadImages('image2')" >Filter 2</button>
<button (click)="loadImages('image3')" >Filter 3</button>
<button (click)="loadImages('image4')" >Filter 4</button>
<div *ngFor="let image of (images$ | async)">
    <h2>{{image}}</h2>
</div>

Xavid Ramirez · Accepted Answer · 2018-08-01 15:21:27Z

1

The issue is that if indeed you are trying to filter by whatever is in the string of category, a simple string comparison will always result in false. Take this for example.

const x = ['image1', 'image2', 'image3', 'image4'];
console.log(x.filter(x => x === 'image'));
// Resulting log will be an Array wtih length 0 because image1 !== image

However if you are looking for a substring of the string then you can see if the category is a substring of the string.

const x = ['image1', 'image2', 'image3', 'image4'];
console.log(x.filter(x => x.includes('image')));

Whether it is observable or not, the end result of your subscribe is the actual data, which you can run the filter on.

answered Aug 1, 2018 at 15:21

Xavid Ramirez

2162 silver badges7 bronze badges

Comments

Martin · Accepted Answer · 2018-08-01 17:06:16Z

0

Instead of constructor method in service, you can create a new method which will return the image data.

Service:

getImages() {
    return this.db.list("/images").valueChanges();
}

In component, you can call the service method getImages().

edited Aug 1, 2018 at 17:06

Martin

2,43711 gold badges30 silver badges32 bronze badges

answered Aug 1, 2018 at 15:16

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

Freestyle09 Over a year ago

try to set this to images: Observable<any[]>

Collectives™ on Stack Overflow

How can I filter an observable array?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related