Load Local JSON Files in AngularJS 4 w/ Typescript | Ionic Framework

Sharing buttons:

hello everybody Chris here and in this

video I want to try my best to explain

to you guys how you can use angularjs 4

and JavaScript in order to synchronously

load data into your app so that you can

use it as the front-end or anywhere in

your app but you just don't want that

data to be hard-coded into your

JavaScript file so you instead separate

them into JSON so in my case here I

basically separated these options for

this form here so I have like

advertisers and then udemy being pulled

in and then I have all these different

regions for the network being pulled in

so US UK Canada Australia and that's all

being stored over here and assets data

query options dot JSON inside of my

project so right here if you're curious

I'm running ionic framework which is for

mobile applications but it would

basically be the same process as long as

angularjs and JavaScript so you can see

here I've basically got these arrays

declared so the advertisers block and

then the network's block and then bunch

of options can that more later if I want

and yeah that's pretty much what's going

on there so I have a page called query

and that's where the majority of this

stuff is happening well really all this

stuff because that's this page you see

here so at query dot TS typescript you

can see I've got these properties

declared networks and advertisers now at

the start that being declared as India

race I think you could declare them as

any and that would be fine maybe you

don't even have to declare them at all

but these are being referenced over and

the HTML page where the angularjs is

actually doing its work so I have these

ions select components and for the

options that are going into those ion

selects we're using at or really star ng

4 equals what advertiser of advertisers

and then let network of networks down


or the network select and these

advertisers and networks properties

those it just over on the typescript

page so right now because it hasn't run

yet those are completely empty so anyway

in theory what would happen we have

these empty properties and we loop

through each of the advertisers and each

of the networks and then for each

advertiser at each network we split out

advertiser dot name or network dot name

notice the brackets here in order to

reference that and those are going into

each eye on option so in G for basically

we only declare one eye on option but

we're able to loop through all the data

which is really nice and we don't have

to know how many there are

either this obviously you saw here for

the network drop them there's four

options but there's only one eye on

option so that's where this becomes cool

anyway over on query TS after the page

loads we have to actually load in that

data which angularjs will take

immediately refresh and I'm doing that

using an injected class called data

finder so this is what I created we're

looking to the code in the second year

and it's got a method called get JSON

data async so hovering over it you can

see that that returns a promise and then

when that results successfully we're

using the dot then for the promise which

is going to take the data returned by

that promise and put it into this dot

set weary options data with the data as

parameter and load that into each of

these two properties over here so to

point out the reason that has to be a

completely separate method here rather

than just calling this dot networks

equals data network so this thought

advertisers equals data advertisers up

here without declaring this separately

it's because if you do that this isn't

actually in the

I guess the scope of the query page so

calling this you won't be able to

successfully reference these properties

which is an issue but you can get around

that by calling this on a method rather

than this on a property so anyway let's

go into get JSON data async you can see

that I'm injecting HTTP the service into

the constructor here so that's gonna

automatically resolve with how

everything's declared in app module TS

for the psionic project I guess we can

go there for a second

so you can see I've got all these

declarations imports providers the

provider for a big binder is being

declared so that we can inject that into

the query TS page and thank HTTP modules

where this imports is happening so HTTP

module and then we can inject that into

the data finder class and you can see of

course it's declared this at injectable

so that we can inject it in query dot TS

as a constructor parameter okay so

anyway let's see where were we okay so

date apply under TS it's using this HTTP

service and in the method get JSON data

async I'm taking a final path which is

the string where the JSON file is

located in this case it would be well

dot slash assets slash data selection

JSON you can see that right here but

it's going to vary depending on where

you saw and you JSON files inside of

your project and let's go back over so

this method is returning a new promise

which means that after everything that

happens in here is completed it's going

to return some data outside into query

dot TS that we can use and assign into

networks and advertisers so you can see

when that data gets basically completed

in the promise or resolved

it precedes to use then and the data

pops in here and we passed that to the

second query options data method okay so

what actually happens what is it waiting

on this promise to happen so inside of

the promise we're calling this HTTP GET

and that's out of at angular slash slash

HTTP if you need to import that and it's

going HTTP GET on the file path so it's

gonna go find where this JSON file is

located and it's going to try to get

that and return that as a HTTP response

well actually it's an observable

response so what happens here is that

you can subscribe to this observer which

means that when the observer actually

has the data pop into it you can run

whatever's listed inside of this

subscribe function szymek case it's

taking the response out of the

observable and it's gonna check if well

in my case it's gonna check if the

response status is 200 to 299 so

remember this is a HTTP response

so all those 404 errors or 200 success

that kind of stuff that's what you're

expecting here so making sure that it

successfully the response and if it

doesn't it's gonna pass to the reject

callback which is basically going to

leave drop down here and it's gonna

catch with the B's and handle the error

debug logging stuff but if it

successfully finds the file then it's

going to convert the data in this HTTP

response to JSON by calling basically

response dot JSON and I'm showing that

in T Jason lives but really I could just

call this and pop it right into the

result here if I wanted to save a couple

lines of code so ideally it resolves as

a JSON array and that's going to

complete this promise pop the data back

out into wherever we called get JSON

data ace

and then because this promise is

complete it's going to proceed to them

we take the data we pass it into

whatever we want to do with the gate off

so in that case it's a query options

data per mean so pop the data and here

and then assign that to the properties

and this query page and those properties

networks and advertisers those are being

referenced on my HTTP page or HTML page

sorry where we have ng for advertisers

and networks those are the two

properties so then we just loop through

which well and then we just loop through

these two properties which at this point

should be filled in a race and spit out

the names for those properties for every

option found and once again just to

point out the stock name thing here

that's just referring to advertisers and

then you have the item inside of here

and then we have the name key and we get

the value there's also I DTC restored

which is there's something completely

unrelated yeah we just have to call

advertisers name grab that network dot

name grab that for each one and in the

end we get these lists of I own options

which could basically spat out when we

click on the select item and then at the

end we get these items loaded into the

Select component and we can use them in

our page as normal my next step here

would probably be grab the value out of

here and put them into these buttons

here as a parameter query button clicked

but that's how you actually get the JSON

data loaded into your application so

it's so this is something I was trying

to figure out for quite a few hours so

hopefully I collect like this for anyone

else going through these same issues one

of the samples that I use to kinda get

some ideas from here

simple ionic three app I'm going to link

to this on github by Christoph Anderson

pretty cool tool very similar to what

I'm doing in this app and also includes

some of my code down below so hopefully

that gets you guys going thanks for

watching this video and hopefully I'll

see you guys in my future programming