No data being displayed or returned from API when using async await

Question

No data being displayed or returned from API when using async await

My Ionic 6 + Angular 14 application is currently facing an issue with displaying data retrieved from an API...

I have implemented a service to fetch the data from the API and then called this service in the component. The app compiles without any errors and there are no console errors in the browser...

I am seeking assistance in identifying where I may have made a mistake?

Below is the code snippet for my service:

async getCategories() {

 const token = await Preferences.get({ key: 'TOKEN_KEY' });

 const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
 this.httpClient.get(`${environment.apiUrl}categories`, {headers}).subscribe(
 data => {
 this.categories = data;
    },
 error => {
 console.log('Error', error);
    }
  );
}

And here is the relevant code from the component.ts file:

ngOnInit() {
 this.getCategories();
}

getCategories() {
 this.categories = this.categoriesService.getCategories();
}

javascript angular typescript ionic-framework

Answer 1

Answer №1

When working with a mix of Promise and Observable, several issues can arise. It is advised to stick to using Observables whenever possible. In your specific scenario, you have replaced it with.

 async getCategories() {
 const token = await Preferences.get({ key: 'TOKEN_KEY' });

 const headers = new HttpHeaders().set('Authorization', `Bearer 
 ${token.value}`);
 try { 
   const categories = await lastValueFrom(this.httpClient.get(`${environment.apiUrl}categories`, {headers}));
   return categories;
   catch(err) {
     // log error
 }
}
}

This method will provide a Promise containing the data.

The most effective approach is to leverage the advantages of rxjs by utilizing solely Observables.

getCategories() {
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
        switchMap(token => {
            const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
            return this.httpClient.get(`${environment.apiUrl}categories`, {headers})
        })
    );
};

In your component, you should have a variable that holds the Observable like so:

 this.categories$ = this.yourService.getCategories();

Then in your template, make use of the async pipe, for instance:

 <div *ngFor="let category of categories$ | async">
   <p>{{ category }}</p>
 </div>

I also suggest exploring Interceptors in Angular as it is a great place to include the Authorization token.

Best of luck :)

Answer 2

When working with a mix of Promise and Observable, several issues can arise. It is advised to stick to using Observables whenever possible. In your specific scenario, you have replaced it with.

 async getCategories() {
 const token = await Preferences.get({ key: 'TOKEN_KEY' });

 const headers = new HttpHeaders().set('Authorization', `Bearer 
 ${token.value}`);
 try { 
   const categories = await lastValueFrom(this.httpClient.get(`${environment.apiUrl}categories`, {headers}));
   return categories;
   catch(err) {
     // log error
 }
}
}

This method will provide a Promise containing the data.

The most effective approach is to leverage the advantages of rxjs by utilizing solely Observables.

getCategories() {
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
        switchMap(token => {
            const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
            return this.httpClient.get(`${environment.apiUrl}categories`, {headers})
        })
    );
};

In your component, you should have a variable that holds the Observable like so:

 this.categories$ = this.yourService.getCategories();

Then in your template, make use of the async pipe, for instance:

 <div *ngFor="let category of categories$ | async">
   <p>{{ category }}</p>
 </div>

I also suggest exploring Interceptors in Angular as it is a great place to include the Authorization token.

Best of luck :)

Answer 3

Answer №2

To effectively manage observables, it is important to subscribe to them within the component rather than the service. The service should solely be responsible for returning the observable. Additionally, remember that any asynchronous function will return a Promise which needs to be handled with either await or .then()

Service:

async getCategories() {
 const token = await Preferences.get({ key: 'TOKEN_KEY' });

 const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
 return this.httpClient.get(`${environment.apiUrl}categories`, {headers});
}

Component:

ngOnInit() {
 this.getCategories();
}

getCategories() {
 this.categoriesService.getCategories().then(categoriesObservable => 
    categoriesObservable.subscribe(data => {
      this.categories = data;
    },
    error => {
      console.log('Error', error);
    }
  );
}

Answer 4

To effectively manage observables, it is important to subscribe to them within the component rather than the service. The service should solely be responsible for returning the observable. Additionally, remember that any asynchronous function will return a Promise which needs to be handled with either await or .then()

Service:

async getCategories() {
 const token = await Preferences.get({ key: 'TOKEN_KEY' });

 const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
 return this.httpClient.get(`${environment.apiUrl}categories`, {headers});
}

Component:

ngOnInit() {
 this.getCategories();
}

getCategories() {
 this.categoriesService.getCategories().then(categoriesObservable => 
    categoriesObservable.subscribe(data => {
      this.categories = data;
    },
    error => {
      console.log('Error', error);
    }
  );
}

Answer 5

Answer №3

Assigning a variable the result of .getCategories() is not valid because this method does not have a return value.

Answer 6

Assigning a variable the result of .getCategories() is not valid because this method does not have a return value.

Answer 7

Answer №4

It appears that there may be a gap in your understanding, I recommend reviewing the tour of heroes at this link: https://angular.io/tutorial

Answer 8

It appears that there may be a gap in your understanding, I recommend reviewing the tour of heroes at this link: https://angular.io/tutorial

No data being displayed or returned from API when using async await

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on displaying the length of an observable array in an Angular 2 template

Generating an interactive table using JSON with Angular 5

What is the best way to refresh data in a React component so that it displays the recently added data?

React: State updates are not reflecting in the UI components

Guide to activating the timer specifically on select pages with jQuery Mobile

Guide to extracting the key of a JSON object with a numerical name

Ensure that the main div remains centered on the page even when the window size is adjusted

The autocomplete feature is now bypassing any text that comes after the #

Is it feasible to develop a Grafana datasource plugin that does not rely on an external backend system?

The width of the plotbands on the yAxis of a stacked bar graph is adjusting as the series are dynamically toggled,

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

Ways to retrieve parameters in getStaticPaths function?

Using jQuery to target adjacent elements excluding those that are separated by other text

Tips for positioning input fields and labels in both horizontal and vertical alignment

When using jQuery, the search for the ID within an iframe may fail if the specified condition

Next.js encountered an API resolution issue while uploading a file, resulting in no response being

Managing PHP and AJAX: Strategies for handling and transmitting error responses

Getting a Cookie in React from an Express JS API (MERN Stack)

Styling for older versions of Internet Explorer (IE10 and earlier)

Does the frame take precedence over the button?