Fetch Data from an API using the HttpClient in Angular

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 4 years ago

One of the fundamentals in a web application is to learn how to communicate with the backend. In this lesson we learn how to install, configure and use Angular’s HttpClient introduced in version 4.3.1 to fetch data from some backend API.

In order to start using the HTTP client in Angular, the first step is to go to the app module and import the proper module. Starting from Angular version 4.3.1, the new HTTP client, which is called HTTP client module, lives in the @angular/common/http namespace. Before, it was simply in the HTTP package of Angular.

Make sure to import the HTTP client module, and then in the import section, to declare it accordingly. Also, you need to make sure that in the package JSON, you have imported the Angular common package, which is most often the case.

Next, we need to have some data which we can fetch and actually invoke. Normally, you have an endpoint or some backend API where you can fetch your data. In this setup here, I have used Angular CLI, and as its folder, I have created a data folder which contains a sample JSON structure of people names.

The CLI is nice, and shows us that API are the assess data people of JSON. As you can see, it returns as the JSON file. We can now start implementing our HTTP calls. As a rule of thumb, our components -- in this case, the app component -- should never contain the HTTP or logic. That should rather be delegated to some arbitrary service.

For our purpose, let's create here a people service, and let me paste in here some default implementation of such a people service. We need to go in our app module again and register that people service data in order that it works. Let's import people service here from our people service file, and reference here, and a provider section.

To now use our people service, especially to invoke the HTTP calls or API, the first step is to import the so-called HTTP client. The HTTP client lives as well in the @angular/common/http package. We can get it injected directly into the constructor of our people service here.

Once we have the instance of the HTTP client, we can, here, create a method in our people class -- let's call it fetchPeople -- and then directly refer to that new HTTP instance, which we get here in the constructor.

In order to issue a so-called GET request or endpoint, we can use directly the GetExtension method here on our HTTP instance -- which we got, so we are on our HTTP client -- and then use the URL, which we have seen before. The assets folder/data/people/notJSON.

Finally, we need to return our result here from the HTTP service, which will return an observable. For the sake of the simplicity, let's simply use here the object. We obviously need to import that observable here from the RxJS observable package.

Great. We are now set up. We can jump to our app component here, get our people service. We also want to get that here in constructor. Now, let's assume whenever a button is clicked on our UI, the fetchPeople function here is invoked, which, in turn, will use our new people service here and invoke the fetchPeople callback.

This returns an observable. What we can do here is directly create a variable -- let's call it people -- and associate our response to that people variable, which will then contain the observable. We can now switch to our app component HTML file and start rendering that list of people.

First of all, let's create our button, which will now invoke here our fetchPeople function. Once we click the button, we want to render here our list of people, which we can do by using a simple, and you follow, an AsyncPipe. Let's save this.

When we fetch the people, you can see they get displayed properly on our list here. If we open up the inspector tool of the Chrome dev tools, we can also see how the network request is being made to assess data people JSON.

Mac
Mac
~ 5 years ago

i want to keep this JSON file (people.json) in different folder other then /assets/data. getting 404.

Juri Strumpflohner
Juri Strumpflohnerinstructor
~ 5 years ago

That depends on the setup. The one I'm using here uses the Angular CLI which by default exposes the assets/ folder when running the app. That folder is meant to keep static assets like images and other stuff the app needs to include. I regularly use it for "mock" data like the people.json in this example when you don't have a backend server at hand which serves you a real API.

I'd suggest to stick with the assets folder, but if you want to use a different one, you can totally configure it in the .angular-cli.json file: https://github.com/juristr/egghead-learn-http-in-angular/blob/fetch-data-from-api/.angular-cli.json#L10-L13

Konstantinos
Konstantinos
~ 4 years ago

I want to return an Observable<Person> from the service file, how can I do this?

Konstantinos
Konstantinos
~ 4 years ago

Please delete my comment above.