AngularJS: GET API Call

The previous article describes how to create REST API in NodeJS Express which retrieves data for that view. Therefore this article specifies how to adjust the frontend code to show data received from the REST API.

You will find out how to make a REST API call, how to manage asynchronous calls and to map received data, what for Angular Lifecycle Hooks are. You can find the code on my GitHub.

GET Data From Server

AngularJS has a built-in module that manages HTTP request. This is called HttpClientModule. Add this module to the main app’s module to inject HttpClient class.

HttpClient

The best place for managing HTTP request is a service because it is a reusable piece of code which can be used in different components.

Let’s have a look at this service for retrieving countries. Previously there was hardcoded data, now there is a GET API call. The API endpoint returns an array of countries in JSON format, that is why this.http.get maps the result to Country[] type.

However, it doesn’t mean that the getAll() method returns the array of countries. So what does the method return?

Observable

The method returns an object of Observable class. This class comes from the third-party package RxJS which is built-in in Angular so you don’t have to install it. HttpClient uses it to do asynchronous API calls. Asynchronous means ‘not synchronous’. Therefore it doesn’t block the main thread by waiting for a response from a server. It just executes a call and then rest of code is invoked. When the response is ready, the callback function runs.

Invoking get() method of HttpClient is not enough to do a call. Observable executes an API call on running subscribe() method. Subscribe() then runs the passed callback.

Server Side Pagination

Pagination is dividing a list of some items into several pieces and displaying these pieces separately. It is good to implement pagination on a server if the list is huge and due to that app’s performance would be poor.

REST API from the previous article returns paged conferences with a total count. Manipulating the current page and the page size are handled with a query string.

REST API doesn’t return data in a shape that is convenient to the conferences component’s view. Therefore it must be processed, mapped to receive the shape of the conference’s model.

This is achievable by using RxJS operator – map(). map() transforms the output received from Observable and returns Observable as well. Every Observable has pipe() method that executes the map().

Server Side Filtering

The hardcoded list of conferences was filtered by Angular Pipe. That would be inefficient for large conferences list. Therefore filtering is also handled by a server. What significant has changed in code is a place of executing filters. Now it executes in ngOnChanges() – a lifecycle hook.

What is a lifecycle hook then? A lifecycle hook is a method in Angular component which executes when something happens within the component. For example when the component is going to be destroyed, initialized, etc.

ngOnChanges() tracks changes of @Input properties. As you can see in the above code, changes argument contains all properties that have changed.

Conclusion

HttpClient and Observable work together to handle API calls. Observable has an advantage upon JavaScript Promise because of Rx operators. Operator map() maps API data to a needed form and then subscribe() invokes callback with data in such a form what is readable.

When subscribe() method returns empty data it may be an issue of mapping. If the callback method doesn’t receive JSON with each property that is declared on a class, the mapping won’t work.

Share on

Leave a Reply

avatar
  Subscribe  
Notify of