Angular 8 does not retain class variables once the subscribe function is finished

Question

Angular 8 does not retain class variables once the subscribe function is finished

After calling the fetchCounties() method within the subscribe function, the value assigned to the class variable counties does not persist. When I log the temporary variable data, it shows a valid list of counties, as well as this.counties inside the subscribe block. However, upon trying to access this information outside of the subscribe block, it suddenly becomes undefined. This behavior is confusing to me as someone transitioning from Java to Angular/Typescript...

public counties: ICounty[] = [];  

public getCounties(): ICounty[] {
        this.fetchCounties().subscribe(data =>{
          console.log("data");
          console.log(data);//logs correctly
          this.counties = data;
          console.log("counties inside subscribe " );
          console.log(this.counties);//logs correctly
        });
        console.log("counties outside of subscribe " );
        console.log(this.counties);//logs incorrectly (empty) >:0
        return this.removeInvalidCounties(this.counties); //passes empty counties list...
}

angular typescript

Answer 1

Answer №1

If you want to resolve this issue, consider implementing the following solution:

public getCounties(): Observable<ICounty[]> {
    return this.fetchCounties().pipe(
       map(counties => {
         // Implement your criteria here for a valid county, let's say it must have a name
        return counties.filter(county => county.name);
      }),
    );
  }

You can then consume it as an observable like this:

this.countiesService.getCounties().subscribe(counties => {...});

In your component, you can initialize the counties array like this:

counties: ICounty[];

constructor(private countiesService: CountiesService) {}

ngOnInit() {
  this.countiesService.fetchCounties().subscribe(counties => this.counties = counties);
}

The HTML markup would look something like this:

<li *ngFor="let county of counties">{{ county }}</li>

An alternative approach is to use the Async pipe to handle subscription automatically:

counties$ = this.countiesService.fetchCounties();

In the HTML template, you can display the counties using Async pipe:

<li *ngFor="let county of counties$ | async">{{ county }}</li>

================ Regarding your query about waiting for the subscription to complete before continuing, one method is to convert it into a promise, but this may not be recommended:

public counties: ICounty[] = [];

// TypeScript might show a warning that an async function should return a promise
public async getCounties() { 
  this.counties = await this.fetchCounties().pipe(take(1)).toPromise();
  return this.removeInvalidCounties(this.counties);
}

Answer 2

If you want to resolve this issue, consider implementing the following solution:

public getCounties(): Observable<ICounty[]> {
    return this.fetchCounties().pipe(
       map(counties => {
         // Implement your criteria here for a valid county, let's say it must have a name
        return counties.filter(county => county.name);
      }),
    );
  }

You can then consume it as an observable like this:

this.countiesService.getCounties().subscribe(counties => {...});

In your component, you can initialize the counties array like this:

counties: ICounty[];

constructor(private countiesService: CountiesService) {}

ngOnInit() {
  this.countiesService.fetchCounties().subscribe(counties => this.counties = counties);
}

The HTML markup would look something like this:

<li *ngFor="let county of counties">{{ county }}</li>

An alternative approach is to use the Async pipe to handle subscription automatically:

counties$ = this.countiesService.fetchCounties();

In the HTML template, you can display the counties using Async pipe:

<li *ngFor="let county of counties$ | async">{{ county }}</li>

================ Regarding your query about waiting for the subscription to complete before continuing, one method is to convert it into a promise, but this may not be recommended:

public counties: ICounty[] = [];

// TypeScript might show a warning that an async function should return a promise
public async getCounties() { 
  this.counties = await this.fetchCounties().pipe(take(1)).toPromise();
  return this.removeInvalidCounties(this.counties);
}

Answer 3

Answer №2

The reason you may be encountering issues is due to attempting to access the array before the asynchronous call has completed (fetchCounties).

public counties: ICounty[] = [];  

public getCounties(): ICounty[] {
  // step 1
  this.fetchCounties().subscribe(data =>{
  // step 3 since it is asynchronous and timing-dependent.
  });
  // step 2
  return this.removeInvalidCounties(this.counties);
}

I'm not entirely sure of your intention, but it might be advisable to execute removeInvalidCounties within the subscription.

UPDATE: If you are looking to filter the countries you intend to use, consider the following approach.

public getCounties(): ICounty[] {
  this.fetchCounties()
  .pipe(map(countries => this.removeInvalidCounties(counties)))
  .subscribe(data =>{
    this.counties = data ;
  });
}

Answer 4

The reason you may be encountering issues is due to attempting to access the array before the asynchronous call has completed (fetchCounties).

public counties: ICounty[] = [];  

public getCounties(): ICounty[] {
  // step 1
  this.fetchCounties().subscribe(data =>{
  // step 3 since it is asynchronous and timing-dependent.
  });
  // step 2
  return this.removeInvalidCounties(this.counties);
}

I'm not entirely sure of your intention, but it might be advisable to execute removeInvalidCounties within the subscription.

UPDATE: If you are looking to filter the countries you intend to use, consider the following approach.

public getCounties(): ICounty[] {
  this.fetchCounties()
  .pipe(map(countries => this.removeInvalidCounties(counties)))
  .subscribe(data =>{
    this.counties = data ;
  });
}

Angular 8 does not retain class variables once the subscribe function is finished

Answer №1

Answer №2

Similar questions

angular Issue with setTimeOut() function malfunctioning

Sticky Angular header that keeps content visible while scrolling - no disappearing into the header

Develop a versatile class for storing an array of key-value pairs (dictionary) using TypeScript

I defined a `const` within the `this.api.getApi().subscribe(({tool,beauty})` function. Now I'm trying to figure out how to execute it within an `if`

What is the reason for receiving a JSX warning even though JSX is not being utilized in the code?

Guide to exporting everything within a div as a PDF using Angular 2

After encountering an error, the puppeteer promptly shuts down the page

Defining Zepto's Velocity.js with Typescript

How to package dependencies in an Angular 7 library without directly including them in the main application

When you use npm uninstall, it deletes the package from package.json, but it does not remove it from the node_modules directory

Angular: Unable to retrieve defined data when loading a component

Implementing NgRx state management to track and synchronize array updates

Comparing ESLint and TSLint: Which One Is Right for You

Transmitting an array through a query parameter from Angular 6 to PHP

angular contains vulnerabilities of a moderate severity level

Fetch the JSON data and pass it to the ITest

The menu functionality is not responding when I try to access it by tapping on the screen using Ionic

Using functional components in Redux without the need for React

The first click does not trigger the update for the md-autocomplete

Is it possible to transfer the build files from one environment to another in Angular without the need to run npm run build again