How to access variable value outside subscribe method so that the variable can be used in service method's return in angular 10 using typescript?

Question

 getProductbyFilter(filter: filterDataModel): Observable<any> {
  this.stringtoArrayService.convertStringtoArray(some string input).subscribe(productUserResponse => {
  if (productUserResponse) {
    this.userProfileProduct = productUserResponse;
    this.newParams = this.userProfileProduct[0].Function_Network;
    if (this.newParams != null) {
      this.updatedStr = this.newParams.replace('&', '__', this.newParams);
    } else {
      this.updatedStr = this.userProfileProduct[0].Function_Network;
    }
  }
});
  return this.http.post(url + this.updatedStr, filter, httpOptions);}

I have already visited these links they said to use method inside subscribe. I want to access this.updatedStr but it's returning undefined. I can't write return inside subscribe also. Can anyone please help?

So after setting `updatedStr` in subscribe, you want to call other api with using `updatedStr` — navnath, Sep 28 '21 at 10:01

navnath · Accepted Answer · 2021-09-28T10:20:08.193

0

Try this.. I have not tested it though.

setUpdatedStr(productUserResponse){
  if (productUserResponse) {
    this.userProfileProduct = productUserResponse;
    this.newParams = this.userProfileProduct[0].Function_Network;
    if (this.newParams != null) {
      this.updatedStr = this.newParams.replace('&', '__', this.newParams);
    } else {
      this.updatedStr = this.userProfileProduct[0].Function_Network;
    }
  }
}

getProductbyFilter(filter: filterDataModel): Observable<any> {
 return this.stringtoArrayService.convertStringtoArray(some string input).pipe(
  tap(productUserResponse => this.setUpdatedStr(productUserResponse)),
  switchMap(_=>callAfterSetUpdaterStr(filter))
);

callAfterSetUpdaterStr(filter: filterDataModel): Observable<any>{
  // set httpOptions and url
  return this.http.post(url + this.updatedStr, filter, httpOptions);
}

edited Sep 28 '21 at 10:20

answered Sep 28 '21 at 10:13

navnath

3,548
1
11
19

getProductByFilter(): Observable{ }..also dont forget to import Observable, switchMap, tap from rxjs.copy answer properly...also `callAfterSetUpdaterStr(filter: filterDataModel): Observable` use properly – navnath Sep 28 '21 at 10:28
switchMap gets response from `stringToArrayService` like.`tap(productUserResponse)` gets. But we don't need it in switchMap so we used _. It's like there is input to switchMap but we won't use it. You can upvote answer if you thinks it's valuable – navnath Sep 28 '21 at 11:09
Thank you for your explanation it is really helpful and valuable.. I can't upvote yet i need minimum 15 reputation to cast a vote.. But i marked your answer as accepted.. Thank you again!!! – Sep 28 '21 at 11:32

Girish Sadanandan · Answer 2 · 2021-09-28T10:21:01.873

That is how JavaScript works

getProductbyFilter() {
  yourSubcriptionThatSetsUpdatedStr();
  return yourStatementThatReturnHttpCallObs();
}

yourSubcriptionThatSetsUpdatedStr is independent of yourStatementThatReturnHttpCallObs. So that javascript will finish yourStatementThatReturnHttpCallObs before yourSubcriptionThatSetsUpdatedStr

which means this.updatedStr is returned even before it gets assigned a value from yourSubcriptionThatSetsUpdatedStr; that makes this.updatedStr an undefined.

use Promise or Async/Await to make yourStatementThatReturnHttpCallObswait for yourSubcriptionThatSetsUpdatedStrto finish.

so that you can return from initial method;

Thank you!! but in my project promise/async/await is not used actually.. — , Sep 28 '21 at 10:34

How to access variable value outside subscribe method so that the variable can be used in service method's return in angular 10 using typescript?

2 Answers2