Home > Mobile >  Rxjs combinelatest observable value is undefined
Rxjs combinelatest observable value is undefined

Time:12-31

I have the following code where Obs2 depends on Obs1. However, when I use combineLatest, I keep getting undefined for the value of Obs1. How can I get this to work? I basically just need Obs2$ to filter out the value that exist in Obs1$.

  this.Obs2$ = this.dataService.getObs2(this.id); 
  this.Obs1$ = this.dataService.getObs1(this.id)
    .pipe(
      map(item => {
        return item.prop1
      }),
      tap( val => console.log('the tapped value: ', val)) // shows undefined
    );

  this.CombinedObs$ = 
  combineLatest(this.Obs1$,this.Obs2$)
  .pipe(
    map(([Obs1,Obs2]) => {
      return Obs2
        .filter(t => !Obs1.includes(t.prop1)) //obs1 keeps coming in as undefined
        .map(item => {
                return {
                  entityId: item.teamId, 
                  entityName: item.teamName, 
                  entityCategory: ''
                }})
    })
  )

CodePudding user response:

I got the issue what you are doing wrong is on map pipe, let me know if that return you results:

this.Obs2$ = this.dataService.getObs2(this.id); 
  this.Obs1$ = this.dataService.getObs1(this.id)
    .pipe(
      map(items => items.map(item => item.prop1)), // Issue was here
      tap( val => console.log('the tapped value: ', val)) // It will not show undefinded now
    );

  this.CombinedObs$ = 
  combineLatest(this.Obs1$,this.Obs2$)
  .pipe(
    map(([Obs1,Obs2]) => {
      return Obs2
        .filter(t => !Obs1.includes(t.prop1)) //obs1 keeps coming in as undefined
        .map(item => {
                return {
                  entityId: item.teamId, 
                  entityName: item.teamName, 
                  entityCategory: ''
                }}) // I'm sure you will get error over here so please review and handle that accordingly 
    })
  )
  • Related