how to achieve async data.. angular observable inside observable

Question

What I am trying to achieve?

I have multiple components having almost same checks and data manipulation.. I wanted to shift them in a observable..
I created an observable name "getData" in my service...
the twist is "getdata" has a if check.. -> if the local storage has data then return data. if not then request data from api call(getbyid) then manipulate it and return data..

NOTE: we can't change the getbyid(). and they both are in same service.

API

  getbyid(id: any): Observable<any> {
    return this.http.post<any>(this.serverurl, id )
    .pipe(tap((res) => { return res })); 

     
  }

MY CODE

getData(origin: any, id:number):Observable<any> {
    let data= new BehaviorSubject({});
    if(origin=='main page'){
    let localstorage= this._aes.getItem('localstorage')

    if(!localstorage){  
      
      console.log('before api');
     
        this.getbyid(id).subscribe(res=>{
          console.log('res',res);
          data.next(res)
          return data
         })
      console.log('after api');
        
    }else{
      data.next({data:payload})
      return data.asObservable()
    }

    }
     
  }

This question is difficult to follow - what API are you saying you can't change (and why would you want to change it). Can you change the `getdata` method? — Drenai, Mar 10 '22 at 08:56
Hi, sorry, but I don't get the problem what are you trying to achieve? — Shifenis, Mar 10 '22 at 08:57
CURRENT scenario: its just hitting the getbyid and not waiting for the response and proceed... if somehow we make it to wait for the response this can be solved. — M. Suleman Khan, Mar 10 '22 at 09:33

score 0 · Answer 1 · answered Mar 10 '22 at 09:05

0

class dataFetcher_ {
  data: BehaviorSubject;

  dataFetcher() {
    this.data = new BehaviorSubject({});
  }

  getdata(origin: any, id: number): Observable<any> {
    if (origin === 'main page') {
      const localstorage = this._aes.getItem('localstorage');

      if (!localstorage) {
        console.log('before api');

        const res = this.getbyid(id).subscribe(res => {
          console.log('res', res);
          this.data.next(res);
        });
        console.log('after api');
      } else {
        this.data.next({ data: payload });
        
      }
    }
    return this.data.asObservable();
  }
}

answered Mar 10 '22 at 09:05

Andre Harila

9
1

getting empty response via this. dataFetcher_.getData('main page',0).subscribe(res=>{}) may be its because it execute return this.data.asObservable(); first.. and not waiting for the getbyid response – M. Suleman Khan Mar 10 '22 at 09:15
its just hitting the getbyid and not waiting for the response and proceed... if somehow we make it to wait for the response this can be solved. – M. Suleman Khan Mar 10 '22 at 09:34

score 0 · Answer 2 · answered Mar 10 '22 at 13:11

0

we need to return an observable to make it wait for the data from observable.

Reference: wait observable for other observable in it to respond. Angular async

answered Mar 10 '22 at 13:11

M. Suleman Khan

11
4

how to achieve async data.. angular observable inside observable

2 Answers2