JavaScript Tip: Using fetch to Load a JSON File

Sharing buttons:

in the last tutorial we introduced the

fetch API and used it to retrieve data

from a site today we are going to take a

look at using fetch to retrieve a JSON

file welcome to another tutorial from

all things JavaScript where we help

bridge the gap between novice and expert

as we discussed in the last tutorial

fetch is a simpler way for conducting

HTTP requests if you haven't viewed that

tutorial yet use the link in the

description to take a look at that

tutorial first now a common question for

those that learn fetch is can I use this

to load a local JSON file the quick

answer is yes in fact it is pretty

simple but does have one little gotcha

so let's take a look at how we would do

that now here I have my same HTML file

JavaScript file and I also now have a

JSON file it's just a simple one we have

a class attribute which has a title of

class and then we have a list of

students and then we have a date that's

really all we have with this JSON file

that will help us see that we can load

it now the process of loading a JSON

file is very much the same you enter the

fetch command and then you enter the

path or the URL now technically it

should be a URL it does require an HTTP

URL in order to retrieve the file and I

think that's where some people get hung

up so let's talk about how that happens

let me first enter in the path to this

JSON file it's just in the same folder

as this JavaScript file so I will enter

that like this

now as we learned in the previous

tutorial this returns a promise so we

handle that promise with the then method

and we receive a response and then with

that response like we learned in last

tutorial we want to return the response

but act on it with the JSON method and

that what that's going to do is convert

that text to a JSON file so it's going

to receive the text and then convert it

and then once it's converted we can then

do something with it

so this function is where we would

handle that JSON data so for right now I

will simply do a console log statement

of the data something like that all

right now that's really all there is to

it and I've saved it there and a lot of

people get to this point but they have

have problems they see something like

this fresh that open the console and you

have these errors fetch API cannot load

and then it gives the path to where that

file is that's basically what it's

showing here and it says URL scheme must

be HTTP or HTTPS and so it didn't work

so why didn't it work well the reason it

didn't work is because we need to be

accessing this through a server in order

for us to retrieve that JSON file so

when this these files are placed on a

server it would work fine but while

we're testing it locally in order to

make sure it's working order to test

that we have to run

server locally now that can be done in a

number of different ways I've used grunt

I've used gulp i've used mam mam pro

since I work on the map the latest thing

I use is code kit I like the features

that gives me for not only providing a

server but a lot of the other stuff I do

in projects with minifying and whatnot

so that's what I'm going to be using so

I have code kit running and I've made

this folder available to it so it can

treat it as a server let me just jump to

it's actually the same page but this

one's being served up by my local server

now let me refresh this and open the

console and you can see we have an

object the console dot log statement

displayed an object and this is the JSON

file that we're seeing the class the

date and we can see the list of students

so it works fine once we serve that

through a server now with a working I

then can grab the data and work with the

data as I needed so for example I could

grab the students array they save that

refresh it and here I have that array

and I could work with all those

different student names so that's the

real gotcha with making this work now

one more thing I want to cover before we

finish with fetch I want to show an

alternate way of entering this data you

can create a request object and the

advantage of doing that is you can then

define things about that request object

for example in the previous tutorial we

had to use query strings to enter the

key and other information well that

could all be defined inside the request

object if you chose to so I want to just

show that really quick so let me set up

a request object

we create that by new request and then

we pass in the pack so the exact same

path that we use before we pass in here

and then basically we put the request

object inside the parentheses of fetch

so really that doesn't look much

different but one of the advantages of

creating a request object is we can then

have an init object here as the second

parameter and that can define things

about that request for example let me

copy and so you don't have to see me

type all this let me copy in a simple in

it put it up here you can see we've

defined it as an object we can specify

the method we can specify information in

the headers for example in our last

tutorial where we were grabbing data

from a site the key we needed to find it

in a query string but there was a way to

define it as a part of the header as

well so we could have done that here the

mode and the cache how we want to handle

caching those are all things we can

define in this init object that we then

pass in when we create the request so I

would do a comma my in it just like that

and then everything else would be the

same we pass the request object in to

fetch here so if you need that

flexibility if you need to be able to

create a request off you need

flexibility with the Anette then I would

go this route and you can look up all

the different parameters that you can

define in the via net by simply looking

at the documentation for the fetch API

so let me save this I just want to show

you that it's going to work the same way

I refresh that and there we're still

getting our list of students and so the

end result is the same it just gives you

some more flexibility for how you want

to define that request

there we have retrieved JSON file now

before we're done here

please hit the like button it can help

others find this tutorial also at the

Bell button to be notified about new

tutorials and if you haven't subscribed

yet hit that subscribe button or click

the circle link on the left the one with

my face I release a new tutorial each

week you can click the video link in the

center to access another tutorial right

away or click the link on the right to

visit my website all things javascript

comm for full courses and a complete

list of tutorials thanks for watching