access value outside a service

Question

How to access the this.transactionDetailArtifact outside and assign it to dataTransaction if data.status === Open. Right now this.transactionDetailArtifact is null when I access it outside

Thanks for help.

#code

   edit(data:any){
    let dealType = '';

    if(data.status === 'Open'){
      this.Service.getDealTransactionDetailsArtifact(this.accountId,this.transaction.id).subscribe(
        res => {
          this.transactionDetailArtifact = res.data;
        },
        err => {
          console.error(err);
        }
      )
    }

    console.log(" this.transactionDetailArtifact" ,  this.transactionDetailArtifact)

    const state = { 
      data: {
        dataTransaction: data.status === 'Open' ? (this.transactionDetailArtifact) : (this.transaction),
      },      
    }

    
    this.gotoDetails(state);    
  }

Geraint Anderson · Accepted Answer · 2021-11-15T15:43:29.357

getDealTransactionDetailsArtifact returns an observable, meaning that your code will reach the console.log before setting this.transactionDetailArtifact = res.data;.

You need to wait for the observable to emit before using the value it is emitting. Here I have just moved the block of code at the end into the subscribe. I've duplicated it for the case where data.status !== 'Open', but you could refactor that to get rid of the repetition.

edit(data:any){
  let dealType = '';

  if (data.status === 'Open'){
    this.Service.getDealTransactionDetailsArtifact(this.accountId,this.transaction.id).subscribe(
      res => {
        this.transactionDetailArtifact = res.data;

        console.log(" this.transactionDetailArtifact" ,  this.transactionDetailArtifact)

        const state = { 
          data: {
            dataTransaction: this.transactionDetailArtifact
          },      
        }

        this.gotoDetails(state);
      },
      err => {
        console.error(err);
      }
    )
  } else {
    console.log(" this.transactionDetailArtifact" ,  this.transactionDetailArtifact)

    const state = { 
      data: {
        dataTransaction: this.transaction,
      },      
    }

    this.gotoDetails(state);
  }
}

I'll leave the code above as it is because it is easier to see how to get it working from your code. You could clean that up in any number of ways. Here, I have extracted a function for the duplicated code, and passed the difference as an argument.

edit(data: any) {
  let dealType = '';

  if (data.status === 'Open'){
    this.Service.getDealTransactionDetailsArtifact(this.accountId,this.transaction.id).subscribe(
      res => {
        this.transactionDetailArtifact = res.data;
        this.handleTransactionChange(this.transactionDetailArtifact)
      },
      err => {
        console.error(err);
      }
    )
  } else {
    this.handleTransactionChange(this.transaction)
  }
}

handleTransactionChange (transaction: string) {
  console.log(" this.transactionDetailArtifact" ,  this.transactionDetailArtifact)

    const state = {
      data: {
        dataTransaction: transaction,
      },      
    }

    this.gotoDetails(state);
}

yeah I think the issue with the answer above is the repetiton , is there some clearner way to do this Sir? — , Nov 15 '21 at 15:25
I've left the original answer as it is because refactoring isn't really related to the original problem. See the updated answer for a cleaner solution. — Geraint Anderson, Nov 15 '21 at 15:44

access value outside a service

1 Answers1