Clash Royale CLAN TAG#URR8PPP

How to store AngularFireList observable into array in Ionic 3?

I am retrieving data from Firebase using AngularFire2. I have difficulty with storing the observable that is returned into an array. I want to use that array for filtering later.

I use a provider to get data:

import AngularFireList, AngularFireDatabase from
'angularfire2/database'; //*
import Injectable from '@angular/core';
import firebase from 'firebase/app'; //*


@Injectable()
export class CrudProvider

public storeList: AngularFireList<any>; //*

constructor(
public afDatabase: AngularFireDatabase //*
)
this.storeList = this.afDatabase.list('/stores/'); //*


getStores(): AngularFireList<any> //*
return this.storeList; //*
//*




I import the provider and do more operations on the page to display the data.

search.html:

<ion-content>
<ion-searchbar (ioninput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let store of storeList | async">
<p>store?.name</p>
<p>store?.description</p>
<p>store?.city</p>
</ion-item>
</ion-list>
</ion-content>


search.ts:

import Observable from 'rxjs/Observable'; //*
import Component from '@angular/core';
import IonicPage, NavController from 'ionic-angular';
import CrudProvider from '../../providers/crud/crud'; //*
import 'rxjs/add/operator/map';

@IonicPage()
@Component(
selector: 'page-search',
templateUrl: 'search.html',
)
export class SearchPage

public storeList: Observable<any>; //*
stores: any;


constructor(public navCtrl: NavController,
public crud: CrudProvider //*
)


ionViewDidLoad()


this.stores=;

this.storeList = this.crud.getStores().valueChanges(); //*

this.storeList.subscribe(store => this.stores.push(store));

console.log(this.stores);





The query works successfully and shows data from database on the screen.

The problem is when I try to store the Observable storeList into the stores array. console.log(this.stores) shows an empty array! Therefore, the code above is not working.

The reason that I would like to use an array is that I want to implement a filter using entries from search bar. Observable has not worked well. I want to try it with an array.

Any feedback would be appreciated. Thanks.

this.storeList.subscribe(...)

console.log(this.stores);

this.stores = ;

stores

this.storeList.subscribe(store => this.stores.push(store); console.log(this.stores); );

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.