fetch

Angular 2 - Loading Json Data



Sharing buttons:

as in the previous videos we saw how can

we read the data from a service now in

this particular video we will see what

if the data is existing in some external

environment that environment could be a

database or could be provided by a

service itself so what we are doing here

we will create a separate JSON file

inside which we will keep the data and

then we will try to read that particular

JSON file from our service so the thing

if the means the main major approach is

remaining same but we have just

extracted the data from our hard coded

service and we have kept that inside a

JSON file so let's see how to implement

the loading of a JSON data in our

angular application so as I discussed I

just moved that particular data of

service in this separate JSON file the

data and this structure is still the

same which I have defined in the

interface but it is now moved to a

separate file now while reading this

particular file from the service I will

just use the URL of this file alright if

you are not reading a file if it is

about the service or any database you

can just pass the URL of that particular

service which is reading the data from

the database angular itself directly

will not deal with the database so the

way of reading the data from external

file or from us through a service will

remain similar yes there will be a bit

change if there is some cross-origin

thing but overall the things will remain

similar now I will start making the

changes from my service from where

initially I was returning the complete

data but now I will do a bit more

changes right I will not return this

complete information rather I will

choose some different options first

thing that I am importing here is the

HTTP the module which I will be using

for reading this data alright so I will

include that HTTP module from angular

HTTP

apart from that when I will be using

this HTTP service to read the data I may

have to go for the asynchronous

activities because I will not read the

complete data if it is large at a time

so I'll have to go asynchronous

to maintain the performance as well and

for that here I have this observable

package which I will get from rxjs that

is the reactive x javascript library for

performing the asynchronous server

activities and this particular thing

will give you a lot of operators as here

I have map you can include 2 as per your

preference all right so here I am using

this operator map in order to make my

major operations alright that is the

reading the file along with this HTTP

when I will read the data I will get

some responses so that will also be

found from the same location so I just

included that as well and now inside

this class I will do some more changes

first is the constructor inside which I

have taken a private variable called

HTTP which will be of type su DB all

right as you know this is the shorthand

thing using a constructor that simply

means that in this class I have defined

the HTTP property which is private and

it is of HTTP type and this constructor

is initializing that HD property with

this parameter alright so I am just

using shorthand as I was doing earlier

so this is suggested to be property here

and inside these gate employees the name

of the method is still the same get

employees which I used in the previous

program but now this get program get

employees is not returning you the data

it is reading a file and then returning

you return it's not the hard coded data

which is returning all right and here

I'm using this observable using this

interface I employ all right now my data

is typesafe through this interface so it

is returning you the array of I employ

types so what I will do it will return

this dot HTTP that is this private

member

get is the method which we will use for

reading the data and inside that I have

passed this JSON file location as I said

earlier you can choose any service path

as well which will return you any data

like if there is any restful service

which is returning you the data you can

just make a get request from that

restful service now through this map

operator I am just making a call and

what I am doing here is there is

something called response that should be

there is something wrong it should be

response type all right so there is a

variable RESP which of response type and

this will read this JSON file and will

return the data so let me just save it

and come to the component file now since

I am reading some asynchronous data so

the way of calling this service will be

a bit different the first thing which I

will have to add here is D on in it as

this on in it will help us in calling

the HTTP service is synchronously then

I'll have to implement this on init

interface here alright and this

interface will give me a method called

ng on in it so rather than calling this

service here because it should be time

it will be time consuming thing and I

don't prefer that doing inside the

constructor so I will not invoke this

get employees method out here rather I

just comment it and I will do this

invocation on this ng on init which is

provided by this on init interface

alright so here it's get employees but

since here it is about observable now as

soon as that observable will release

some data here the SUBSCRIBE means the

listener will get the data and we'll

show that so for that here is a

subscribe method which will just read

the data from the employees alright so

here is the employees which is again of

the

at interface type and whichever data you

are getting that will be stored inside

this employee's variable and that will

later be read by this HTML that is the

employees all right so let's come to the

browser and see I am getting the

complete output as it was earlier all

right there is nothing wrong I am

reading the data from this JSON file

first I just checked this service I

added a couple of things like the HTTP

response observable map alright and then

inside this get employees I just

returned that ABS observable that which

is the asynchronous thing alright and

whichever data is read from this JSON

file that is taken by this ng on init

method asynchronously and later as the

full data was read this employees will

be in action and that will show the data

in the HTML so this is how I am still

able to read this data from the external

database or a service or any JSON file