Unable to assign data to object when outside of subscribe method scope-CodePudding

I am able to assign data to this.basicdata when I am in subscribe method but when I console.log it outside the scubscribe it gives undefined.

Here is my typescript code:

id: string;
    substance: string;
    subscription: Subscription;
    basicData: IBasicData;
  constructor(private route: ActivatedRoute,
              private _sharedService: SharedService,
              public packAndPriceService: PacksAndPricesService) { }

ngOnInit(): void {
  this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
      this.substance = params.get('selectedType');
  });
  this.subscription = 
  this.packAndPriceService.searchDrugByBasicDataId(this.id).subscribe((data: IBasicData) => {
      this.basicData = data;
  });
  console.log(this.basicData);
  }

Here is the service code:

 searchDrugByBasicDataId(searchString: string): Observable<IBasicData> {
        return this._httpClient.get<IBasicData>(this.baseUrl 'v1/drug/search-drug-id/' searchString);
    }

If I do this it's giving me error that undefined property drugName

this.subscription = this.packAndPriceService.searchDrugByBasicDataId(this.id).subscribe((data: IBasicData) => {
              this.basicData = data;
          });
          const selectionData = new SearchSelectedItem();
          selectionData.selectedType = this.selectedType.charAt(0).toUpperCase()   this.selectedType.slice(1);
          selectionData.name = this.basicData.drugName;
          selectionData.id = this.id;
          this._sharedService.emitChange(selectionData);

If I move the code inside subscribe then it works.

CodePudding user response：

In .ts file

     id: string;
    substance: string;
    subscription: Subscription;
    basicData: IBasicData;
  constructor(private route: ActivatedRoute,
              private _sharedService: SharedService,
              public packAndPriceService: PacksAndPricesService) { }

ngOnInit(): void {
  this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
      this.substance = params.get('selectedType');
  });
  this.getSearchDrugByBasicDataId();
  console.log(this.basicData);
  }
  async getSearchDrugByBasicDataId() {
    this.subscription =await this.packAndPriceService.searchDrugByBasicDataId(this.id).subscribe((data: IBasicData) => {
      this.basicData = data;
    });
    console.log(this.basicData)
  }

CodePudding user response：

Take a look at the following example:

let name: string | undefined = undefined;
const mockHttpRequest$ = of('someHTTPResponse').pipe(delay(100));

mockHttpRequest$.subscribe(() => {
  name = 'Dave';
  console.log('I will be executed Second: ', name)
});

console.log('I will be executed First: ', name);

The output will be:

//I will be executed First: undefined
//I will be executed Second:: Dave

When you subscribe to an observable, that code running is asynchronous, meaning, it will run sometime in the future, the outer console.log runs first, because is synchronous.

The behavior you are having with your code is 100% correct, is expected. That's how observables work. If you need to do something with the observable data before subscribing, you can pipe it and apply all the necessary rxjs operators. If you need to do something with this.basicData, you need to handle it while you are subscribing. I could suggest ways of handling your code but, I don't know exactly (based on your code) when and how are you going to use this.basicData

You can learn more about observables here