How to fetch local json file in javascript
JavaScript Tip: Loading a Local JSON File without Fetch
Timecodes:
loading a local json file is frequently
done with fetch but that is not the only
way to accomplish this
in this tutorial we are going to look at
a method for loading a local json file
without using the fetch api
welcome to another tutorial from all
things javascript as always make sure to
click that bell button and subscribe and
remember to check out the discount links
to all my courses in the description
i really appreciate the support and if
you'd like there are other ways to
support the channel which are linked to
in the description as well
if you provide support through patreon
you get access to all the code files
and for a list of all the tutorials i've
done which are over 230 you can go to
the website as well
now for this tutorial i need to give
credit to jay tillman one of our patreon
members
not only did he suggest the topic but he
also provided this solution we're going
to look at
the solution is similar to a solution
used with node and involves a technique
used for loading modules in javascript
i've done a previous tutorial on using
fetch to load a json file and we'll link
to that tutorial in the description for
those that are interested
now there is nothing wrong with using
fetch to load a json file in fact it
works great but like all things in
javascript there's usually more than one
way to do things
this technique doesn't require using
promises and there's no need to parse
the data once loaded and so it might be
preferable
for some people
so here's the scenario
we have a local json file that we need
to load as a part of a project how can
we do that without using fetch
well we can use the import statement met
for modules
we just have to make a minor adjustment
let's take a look at it
now
in my tutorials i normally use sublime
text since that is how i started all
these tutorials several years ago but in
this one i'm going to use visual studio
code as shown here
this is the editor i use for the
majority of my work now
in this case i'm going to use it because
it has a nice little extension
called live server let me just
show that to you really quick i've got
it installed right there
so nice little extension called live
server when this extension is used you
can serve up your pages with a local
server since loading a json file
requires
a local server or placing the files on
a live server to work
this is what i'm going to use to show
the results so
first off
i have this html file present.html this
has the same content
is what i'm showing here all right exact
same content that's the same html file
then i have a javascript file right now
there's nothing in it
and here's the json file
i'm going to load so very simple just
has a couple of names in an array
two objects with names in an array
that's what we're going to load just to
show that we're able to do that
so let's take a look at the solution
now the first thing we need to do is we
need to make a change to the script tag
so currently i have a script two script
tag here's one for start.js this has
some code that
does some things for when i'm presenting
these files if i want to go to another
html page or something like that i have
some code for managing all of that so
it's not really the code we use for the
tutorial
however the app.js file is always the
code that i use for the tutorial when
i'm doing these
and so that's why i have both of these
attached now we need to make a change to
this one here because this is where
we're going to
do the loading of the json file that's
where we're going to put the code to the
loading we're going to use the import
statement which is intended for
modules that's why it was created for
modules
and so in order to make that workforce
we have to set the script type here
to module like that
and this will allow us to use that
import
all right so i've made that change first
in the html file
now if i come over to app.js
here is where i can use the import
statement
so it looks like this
users is where i'm going to place
whatever is imported okay
and now i indicate what i'm importing
now the json file is contained within
this json folder right here
and that json folder is is in the exact
same location as the
present.html and app.js file so
i will start from the current location
dot
and then i'm going to go down to the
json folder
and grab sample
json like that so that's what i'm going
to load all right
now the trick is this is normally what
you would enter for an import statement
if you're loading a module but the trick
is this is a json file so we have to use
an assert to indicate such and so we do
assert and inside curly braces here
type
and
[Music]
string json like that
so this is what's required in order to
load
a json file after you've
set the script tag to type module
now just to show that we're loading
everything i'm just going to do a
console log statement here
and log users
because basically what's inside of this
is going to be placed in users and
that's how we would access it that's how
we'd continue to work with
that json file if we needed to i'm going
to go ahead and save that
now we need as i mentioned we need to
serve this up on a local server in order
to see it working so the way i do that
with the live server extension
in visual studio code is i simply click
go live
and that's going to launch a new page
for me
and as you can see it's the page we were
looking at it's the same page we were
looking at
and then if i go to the console
i should see the array and it's showing
the data from the json file so that went
ahead
and it loaded correctly now let me just
show you
what would happen
if we left this part off
so
going to save that
we get this message here fair the load
module script expected a javascript
module script but the server responded
with a mime type of json here so it
knows that we're loading a file
different from what it thinks we should
be loading because traditionally when
we're loading modules
we load javascript files
and so that is the reason for that
assert
in order to indicate that it is a json
file that we're going to be loading so
once that's done then it loads correctly
now
really quick let me just show you one
more thing i have this same file exact
same file here pulled up just as a local
file not through a local server i have
that over here that's what we're looking
at initially so it's not through a local
server
this is the error you would get if you
weren't doing it through a local server
access to script gives all this stuff
from original has been blocked by course
policy cross origin request this all
sounds very confusing but basically
the reason this era message pops up is
because we are not
loading this through a local server and
the thing we're trying to do on that
javascript file requires this to be on a
server all right so that's why we're
getting that
so that is our solution two changes in
the html file
and then we use the import statement in
the javascript file
all right please hit that like button
and subscribe and remember the discount
links to all my courses in the
description section click that bell
button to be notified about new releases
i release new tutorials as often as i
can and once again thanks for watching
Related queries:
how to get local json file in javascript
how to fetch local json file in next js
how to fetch data from local json file in react js
javascript fetch json example
fetch json example
how to fetch json file in javascript
![Fetch Data from JSON File in React JS | React JSON [ UPDATED ]](https://img.youtube.com/vi/aJgAwjP20RY/mqdefault.jpg)
