How to make a function an Observable in Angular

Question

I have the following code in my IONIC app which sets some filters. The first time its run the filters are always undefined as the query executes before it finished setting them. What my code does is it gets the current filter object from ionic storage, updates the storage, then gets the newly updated one and executes a http request to an api.

setFilter(params: any) {
    console.log('calling Set Filter');
    // tslint:disable: max-line-length
    this.storage.get('filter').then(filterStored => {
      console.log('Filter ', filterStored);

      if (params.type === 'privacy') {
      this.storage.set('filter', { privacy: params.option.name, occupancy: filterStored.occupancy, status: filterStored.status } ).then(res => {});
    }
      if (params.type === 'occupancy') {
      this.storage.set('filter', { occupancy: params.option.name, privacy: filterStored.privacy, status: filterStored.status  } ).then(res => {});
    }

      if (params.type === 'status') {
      this.storage.set('filter', { status: params.option.name, privacy: filterStored.privacy, occupancy: filterStored.occupancy } ).then(res => {});
    }

  this.storage.get('filter').then(refreshfilterStored => {
  console.log('Updated Filter ', refreshfilterStored);
  this.queryFilter =  refreshfilterStored;
 });
});

this.farmStreetHouses$ = this.farmStreetHouseProvider.getFilteredPrivacy(this.farm.guid, this.street.sasn, this.queryFilter)
    .pipe(
      tap((res): any => {
        this.farmStreetHousesCache = res;
      }),
    );
}

So what i am trying to achieve is that we get complete everything getting original storage, updating storage , getting updated Storage before we call the farmStreetHouses Observable

Answer 1

If you simply move your Observable into the then() function from your filter fetch, you should have the proper filter set for your request:

setFilter(params: any) {
  console.log('calling Set Filter');
  // tslint:disable: max-line-length
  this.storage.get('filter').then(filterStored => {
    console.log('Filter ', filterStored);

    if (params.type === 'privacy') {
      this.storage.set('filter', { privacy: params.option.name, occupancy: filterStored.occupancy, status: filterStored.status } ).then(res => {});
    }
    else if (params.type === 'occupancy') {
      this.storage.set('filter', { occupancy: params.option.name, privacy: filterStored.privacy, status: filterStored.status  } ).then(res => {});
    }
    else if (params.type === 'status') {
      this.storage.set('filter', { status: params.option.name, privacy: filterStored.privacy, occupancy: filterStored.occupancy } ).then(res => {});
    }

    this.storage.get('filter').then(refreshfilterStored => {
      console.log('Updated Filter ', refreshfilterStored);
      this.queryFilter = refreshfilterStored;

      this.farmStreetHouses$ = this.farmStreetHouseProvider.getFilteredPrivacy(this.farm.guid, this.street.sasn, this.queryFilter)
        .pipe(tap((res): any => {
          this.farmStreetHousesCache = res;
        }));
    }
  });
});

(I think if you fix indentation and use else clauses as I have here the code is a bit easier to read.)