Receive data from multiple observables in Angular

Question

I have 2 services. Both services have individual subjects and I am exposing both of them to other components by returning asObservable. Both have an addDataN function and both are emitting data to respecting subjects in services by on subject,so the getdataN method which is also emitting data on subject.

Now at the consumer side I am receiving two services completely independent. In component I am subscribing to the Listener, which are returning asObservable, and getdataN funnction, which are emitting data

Serv1

  getdata1() {
    this.http.get<{message:string,Data1:any}>('http://localhost:3000/api/1')
      .pipe(map((data1)=>{
        return Data1.Data1.map(data=>{
          return  {
            id: data._id,
            data1Title:data1.data1Title,
          }
        })
      })).subscribe((data1) => {
        this.data1=data1
        this.serv1Subject.next([...this.data1])
      })
  }
  addData1(){
       this.http.post<{message:string,Data1:any}>('http://localhost:3000/api/1',dataObject)
       .subscribe((data)=>{
           this.data1=data1
        this.serv1Subject.next([...this.data1])
       })
  }

  getData1Listener() {
    return this.serv1Subject.asObservable()
  }

Serv2

  getdata1() {
    this.http.get<{message:string,Data2:any}>('http://localhost:3000/api/2')
      .pipe(map((data1)=>{
        return Data2.Data2.map(data=>{
          return  {
            id: data._id,
            data1Title:data1.data1Title,
          }
        })
      })).subscribe((data1) => {
        this.data1=data1
        this.serv2Subject.next([...this.data1])
      })
  }
  addData2(){
       this.http.post<{message:string,Data2:any}>('http://localhost:3000/api/2',dataObject)
       .subscribe((data)=>{
           this.data1=data1
        this.serv2Subject.next([...this.data1])
       })
  }

  getData2Listener() {
    return this.serv2Subject.asObservable()
  }

Now at consumer component at ngOnInit at beginning I want to make sure that both subjects emit data and perform function x on data received from both end. And after that both work independently.

        ngOnInit(){
            this.serv1.getdata1()
            this.serv2.getdata2()
        combineLatest(this.serv1.getData1Listener(), this.serv2.getData2Listener())
.subscribe(([data1,data2])=>{function x(){
    something with data1,data2
    }})
    }

My Problem is with zip at beginning. Both work fine at beginning as both services emit, but after emitting data to serv1 the other is not emitted anything so it stuck there.

In withLatestFrom only recent data is received and I want to avoid spread operator

Is there any way I can cleanly implement this?

Any help is appreciated.

Does this answer your question? [Merging http observables using forkjoin](https://stackoverflow.com/questions/43166214/merging-http-observables-using-forkjoin) — Akash, Aug 25 '20 at 06:37
@akash and i want to avoid the append the only latest data to existing data. is there any other way? — Kalpesh Kadam, Aug 25 '20 at 06:41
_after that both work independently_ - please show the component implementation. — ruth, Aug 25 '20 at 06:53
You're showing only the independent part. You say you've tried `zip` and `withLatestFrom`, please show them. What do you exactly mean by perform `x` on first emissions and after that behave independently? — ruth, Aug 25 '20 at 07:07
now when at beginning i want to make sure both subject is emitted but after that they are independent cant do that with zip as zip require next on both subject creating dependency. — Kalpesh Kadam, Aug 25 '20 at 07:14
it looks like `combineLatest()` is what you need. It will only emit once each source observable emits at least once, but after will emit any time either one emit (independently). But you are already using it! What behavior are you seeing? What behavior is desired? — BizzyBob, Aug 27 '20 at 02:51

Receive data from multiple observables in Angular

0 Answers0