The humble JSON file meets Angular v4
Do you want to take a simple JSON file and display some of that data in your browser, but there are just too many steps to keep track of?
Yeah, I’ve been there recently.
Note: this blog will use Angular version 4.3.2.
I am new to the Angular 2+ game, so if you have suggestions for how to improve this demo, please feel free to comment below.
Where are my modules?
With Angular’s modular approach and its continued evolution, I continually have to ask myself where do the modules live? Currently, the HttpClientModule is located on ‘@angular/common/http’. That may change. And older blog posts or books may list incorrect locations for common modules.
When in doubt, check the documentation and check that you are using the most up to date version of Angular (otherwise the documentation may not be as relevant).
Where do I load the JSON?
What do you plan on doing with the data? If you’re sharing the data between components, you’ll probably want to put it in a service. Otherwise, you can load it directly into the component itself.
For the sake of this post, I’m going to load it into a service. However, if you’d like to see it loaded into a component the Angular docs have a simple example under Making the Request.
Okay, let’s get into this.
For this demo, we’ll look at 6 files. We’ll have our JSON file, a module, a service, a component, an interface and a directive. For more in-depth information on the interactions between these files, check out the Angular documentation’s Architecture Overview.
What goes in the our module?
If you’re new to building Angular 2+ apps, applications use the NgModule class and its decorator @NgModule to tell Angular how to run your code. Within @NgModule you’ll specify which of the framework’s modules or other third-party libraries you’re using. You’ll also specify the component(s) and any pipes or services you’ll be using in the module.
The aim of NgModule is to help create clean encapsulated pieces of functionality. If you’re unfamiliar it looks like gobbledygook.
To quickly go through this — you’ll load the HttpClient module, your component(s) and your service (here called BatFriendsService). First by importing them into the module and then by placing in the @NgModule decorator.
What goes in our service?
In this service, you’re going to want to import Injectable and HttpClient (as opposed to the HttpClientModule imported into our module file). For my implementation, you’ll need to npm install rxjs. RxJS is a library that provides additional functionality for async and events-based programs.
Our http.get() function returns an Observable, which we can iterate over using an RxJS’ map() method. An Observable in RxJS allows you to operate on it without needing to access the whole data structure before you start.
For more information on RxJS, check out this introductory post by Gerard Sans.
Our observable will be sent through the extractData() function and return an error, the data from the JSON file or an empty object.
What goes in our component?
We’ll import our BatFriendsService in our component and make a private variable with the alias batFriendService. We’ll call the getData() function and map our data to our friend’s interface. We’ll make this data available on initialization of the application using ngOnInit.
This will make our data available to our component and directive using the variable friends.
What is this Friends business?
The friends variable in our component needs to be in the form of this Friends interface that we have defined in its own file and loaded into the AppComponent. This will help validate that we are working with data of the correct type.
What goes in our directive?
Lastly, we will output our data to the screen using a directive. Taking our friend’s variable, defined in our component, we can iterate through the data using *ngFor and limit which items we show using a conditional in *ngIf. From there, we’ll output the character’s name to the screen.
What do we get for our efforts?
A simple list. I’ve added a few styles for readabilities sake, otherwise it is just a list.
If you have any questions or feedback, feel free to comment below!