How to fetch data from api in vue js
Vue JS 3 Tutorial for Beginners #9 - Fetching Data
Timecodes:
now so far in all of our view
applications we've declared any and all
data inside
the components themselves right here
like this
now more often than not when we create
websites that data will be stored
somewhere else instead
like in a database and we normally have
to fetch that data from an
api endpoint or something like that so
in this small chapter i just want to
show you how we can fetch
external data from inside a view
component now to begin with we won't be
working with a database
because i don't want to introduce too
many concepts at one time
so instead we'll use a package called
json server to simulate an api
that we can make requests to so json
server basically allows us to
use a simple json file like this
containing data
as a database resource with various
different endpoints
so for example i could create a json
file called db.json with blog data
inside it
i would then use jason's server to watch
that file
and provide us with local api endpoints
to interact with whatever resources
we define inside that file so json
server basically
wraps our json file with api endpoints
and it gives us these endpoints so we
can interact with
this data in this case it would be
forward slash blogs to get all of the
data that would be a get request
if we wanted to add new data we'd send a
post request to forward slash blogs
to get a single blog we'd go to forward
slash blogs forward slash
id so it provides these endpoints and
more as well to interact with
this data and then we can do that
locally from our view components
so json server really just allows us a
quick way
an easy way to work with local data that
simulates how
an api behaves it's very good for
learning practicing and developing
and that's exactly what we're doing here
so the first thing i'm going to do to
set this up
is to create a db.json file now i'm
going to create this in the root of the
project and generally when i work with
data like this i create a data folder
and then i place it inside there so let
me create
a db.json file and by the way you don't
have to call it db
call it what you want db just stands for
database since we are storing data in it
okay so for those of you who have never
worked with json before it's very
similar
to how a javascript object looks so it
would start with curly braces much like
an object and then we have key
value pairs but there are a couple of
subtle differences
first of all all of the keys must be in
double quotes and that's not the case in
javascript objects
so when we create a key we put it in
double quotes like this
now when we're creating a json file for
json server any top level keys are seen
as
resources so for example we want a jobs
resource and that would be the key so
this is going to be an array of data now
what i'm going to do is just paste in
three different objects so you don't
have to watch me type them out from
scratch
now i wanted to just quickly mention the
other difference as well in json
than a javascript object and that is
that when we use a string
as a value the string must be in double
quotes as well
if this was single quotes it wouldn't be
valid json
so this is our json file for the jobs
resource
now if we had multiple different
resources for example we could have jobs
and we could have something else like
blogs
then we just create another top level
property
like this and then when we watch this
with jason's server
it would see we have two different
resources and we could
interact with both of those so we only
want one resource
i just wanted to show you that you could
do that i'm going to save it
and close this off the next thing we
need to do is install the json server
package
locally inside this project now to do
that we need to open up a terminal
now i already have the local host for
the view application
running right here because we ran before
npm
run serve so i need to open up a new
terminal by clicking this button right
here
and then over here i'll say npm
install this is how we install a package
locally and the package
is called json hyphen server
now if you've got a really old version
of
node i think it's version four or less
anything less than five then you'll also
have to use
the save flag like so but if you've got
a newer version of node
then you don't have to do that so i'm
gonna press enter and that's gonna
install the package
locally into the computer and it's local
because we didn't use the hyphen
g flag which stands for global and that
would install something globally on our
computer this was just locally
so now if we take a look inside
package.json
we can see that json server is now a
dependency
that's been installed and it will be
stored inside the node modules folder
so how do we actually use this to watch
a file
well it's pretty simple all we need to
do is come down here in the terminal and
say
json server like so
space and then double dash watch to
watch a file
and then the name of the file the path
to the file now in our case that's in
the data folder forward slash db dot
json so i'm going to press enter and
now we can see that it spun up a local
development server on port 3000
that's different from our view website
which is on port
8080 so the
json server is using port 3000 and then
the end point to get the jobs is forward
slash jobs
if we had multiple resources then we
would have different endpoints
let me just demonstrate that i'm going
to go to db.json and add in another
resource again
so let me just say blogs and that is
going to be
an empty array save that and now we can
see we have
two different resources down here so
jason's server was watching this file
for changes
it's noticed another resource and it's
given us an end point for that as well
we don't need it so i'm just going to
remove it again and we're just going to
use jobs
but if we now open this up in a browser
then it's going to send a get request
for
this resource right here and it's going
to send back json
with all of these different objects
included so
let me try that i'm going to open this
up in a browser over here
i'm going to control click to do that
and now we can see we get all of this
json back in the browser now typically
we don't want to be sending
get requests for our json inside the
browser
address bar like this what we want to do
is send those requests
from our components for example inside
the jobs component right here where we
have all of these jobs
we want to send it from this component
to retrieve that data
so we can cycle through the data in the
template and output it on the screen
so we're going to start that process in
the next lecture
so now we have our db.json file with all
our data in it
and we set up the json server to watch
this and give us access to end points to
interact with it and get the data
let's try fetching the data from the
jobs component
now at the minute we're just creating
the data directly inside this
component but typically when we make a
project we wouldn't do that
our data might change over time and it
would be stored in something like a
database
now we're not using a database in this
case we're just using json server
but we will use databases later and the
concepts of fetching the data from an
external source
are still the same so the first thing
i'm going to do
is delete the data inside this jobs
array now i will
keep the jobs property because
ultimately we want to cycle through
those jobs
to output them to the screen all we're
going to do is fetch the data
from this external source and then we're
going to populate this jobs property
with that data and then once it has that
data we can cycle through them
all right so the first question is where
do we get this data at what point
well a popular place to get it is inside
the mounted
lifecycle hook remember a view component
has
life cycle hooks which fire at different
points during its life cycle
the mounted one fires when the component
mounts the dom
so at that point we're going to go out
and fetch the data
now to do this we'll be using the fetch
api
now if you don't know much about fetch
or promises or asynchronous javascript
in general
definitely check out the last chapter in
this whole course where i talk about
different javascript features
i cover fetch and promises right there
so if this is confusing
check that out so we need to pass in an
endpoint
to the fetch method and that endpoint is
provided to us
by json server right here so it's this
thing to get all the jobs
so i'm going to highlight that and copy
it and i'm going to paste it inside here
inside a string like so so this is going
to go out and fetch
that data for us and return it in json
format
now this is asynchronous and it returns
a promise
so what i'm going to do is tack on a
then method which fires a callback
function
after this is done now this returns
an object with json data included in it
now in order to actually get that data
that json
and pass it into javascript we need to
take the response
which we get as an argument here and we
need to use the json method on it
so we say response dot json this is how
we work
with the fetch api now when there's only
one argument inside the callback
function we can remove the parentheses
which is what i'm going to do
and this thing right here this is also
asynchronous and that also
returns a promise so all we need to do
is tack on another then method which
will fire another function
when this is complete and this function
gets access to
a different argument and that is the
actual past
data so whatever data we have right here
we get back all right so it's going to
be an array of objects
so what do we want to do with that data
well all we want to do is populate this
array right here
with that datum remember this is an
array of data so all we need to say
is this dot jobs to get the jobs
property that we have right here
and set it equal to the data that we get
back which is an array of javascript
objects
an array of jobs and that's all we need
to do
now since this might error if something
is wrong
with the asynchronous task we can tack
on
a catch block which will fire a function
if there is
an error and we get that error back as
an argument inside this function
all i'm going to do is console.log the
error
dot message if there is one so every
error that we get back we'll have a
message property
which tells us what the error is all
we're doing is logging that out if there
is
an error so now let's see if this works
hopefully
everything should still look the same we
should see on the page
these three jobs so let me save this
and preview and this is the end point we
don't want that
i'm going to go to ninja jobs and then
go to jobs and we can see we still have
all of these three jobs
and if i had refresh we can see for a
second
it's blank while it makes the fetch and
then once we have the data
it outputs them because remember to
begin with the jobs is just
an empty array it's only after we have
the data
right here that we populate that array
and then we can output it
okay so that's how we get external data
we can make a fetch request
inside the mounted hook to update a
property then cycle through that
property to output it to the screen
now i also want to make a fetch request
inside
the job details component because
currently all we're doing
is outputting the id over here and we
can see on the job details page
we see the job id is too now i want the
full
data of that job i want all of this
stuff right here
for that job so we can output the job
title and the details even though it's
just one word
so i'm going to have to make another
fetch request over here
inside this component to get the job
with the id
that we have right here so again let's
do a mounted hook
and this is where we're going to fetch
the data so what i will do is go back to
jobs and just copy
all of this fetch request right here and
paste it in
right here now this time the end point
has to be a bit different because we
don't want all jobs
we just want a single job so in order to
get a single job it has to be
forward slash and then whatever the
ideas of the job
we want to get so in our case it would
be
this right here the id of two if we were
on this page
now we have the id remember we accept it
as a prop when it's passed in as a wrap
parameter
so we can use it and we can tack it on
the end by saying plus
this dot id this because we reference
the components and id because we have
that as a prop
all right so now this will be either one
two or three depending on what job we're
trying to view
we're getting the response we're passing
the json
then that data will this time be either
an object
which is this job this job or this job
dependent on the id
and so we have access to that object now
what i'd like to do is store that object
inside some component data so i'm going
to create a data function
and inside this return an object we need
our comma
after data don't forget that and i'm
going to create a property called
job now to begin with that will be null
but once we have this data back from the
fetch i'm going to say this.job not jobs
is equal to that data so this will now
be
a javascript object which represents one
of those jobs
and we're also catching the area if
there is one and logging it through the
console
so now i have this job we could maybe
output those job details on the page
because we have these different
properties
we have the title and the details which
we can use
so instead of this in the h1 i could
output maybe
the job title like so and then at the
bottom i could do a paragraph
and output the job details as well
like so now if we try this in a browser
let me just save it we're going to get
an
error and i'll explain that in a second
first of all let me just
refresh over here and notice now we
don't get anything
at all now if we open up the console
then we're going to see an error over
here and if we scroll up that error
says cannot read property title
of null so inside our template we're
saying job.title
and we can't do this because it's saying
we can't get the title property from
null
but why is this null because we're
trying to retrieve a job object
well it's null because to begin with
when we first load the component
we set the job to be null we only have
a value for the job when we retrieve it
using the fetch api and that takes a
second or
so to get so to begin with when we first
load the page
we're trying to output the title
property of null it's only when we have
a value for the job that we can do that
so we need to figure out a way to
conditionally output this stuff right
here
only when we have a value back from the
fetch request
and we'll see how to do that next
so we ran into the problem whereby this
was causing an error
because to begin with the job is null
and we can't access the title property
on null that makes no sense
it's only after the fetch request has
completed
and we update the value of the job to be
the data that we get back
that we can do this so we want to only
output this
once we have a value for the job and to
do this we're going to use
v if now we've seen this in the past
whereby we can use the v
if directory to only output a certain
amount of templates
if a condition is true so i'm going to
create a div
first of all and then i'm going to say v
if
on this div and set it equal to
something now remember if the thing
inside this
is true then it will show whatever
inside the div if it's false
then it won't show this div and whatever
is inside it so i'm going to set that
equal to job
now to begin with job is null and null
is a faulty value
so it won't show this div and everything
inside it to begin with
and then when we assign a value to the
job using the data we get back from this
fetch
then this will have a value and since it
has a value
it will evaluate as true any kind of
value will be true
so now this would only output
if we have a value for job and at that
point we can say this
job.title and job.details because then
job will be one of these objects so
let's try this out now hopefully now we
won't get an error i'm going to save it
and refresh and now we can see
the title and the details
all right cool now we could also if we
wanted to add
a v else so i could say div and then i'm
going to say
v else and so if this is not true
which isn't to begin with then we can
output something like
loading job details so i'll do a
paragraph tag and say loading
job details dot dot like so
and if i refresh over here you'll see
that flash up this bit right here
for a split second until we have the
data and then once we have the data it
replaces that
with the job data so watch this
very quickly very very very quickly
impossible to see
but if you've got a slower connection
perhaps you'll see it for longer than i
did
but either way it was there now i'm
going to do something very similar
inside the jobs component and i only
want to output this stuff right here
once we have jobs now it doesn't really
matter so much
in this case because we have an array
and that has a value
it's just that we can't cycle through an
empty array so even though it tries this
there's no jobs in there it's not going
to error it's not going to cause an
error
which is why we don't need to do a v if
around this but i'm going to do a v
if around it so that i can do a v else
as well
so i can output loading jobs until we
have the data
so let me now do a div at the top
and i'll say v if is equal to
jobs and not just jobs because it does
have a value and this will be truthy
but jobs dot length
now this will be false because it
doesn't have a length there's nothing in
it to begin with
all right so if i copy all of this stuff
right here
or we cycle through the jobs inside that
now this is only going to be output once
there is a length
inside here now i can do another div
and i can say v else on that
and so if this is false which it is to
begin with then i can output instead a
paragraph tag
saying loading jobs dot dot dot
all right so let's see if we have better
luck with this
i'm going to go to jobs and okay
we didn't see that but i think i'll hard
refresh and
you could see it for a split second
again it said loading jobs watch this
split second loading jobs so now we show
this
until the jobs are ready and then we
show the jobs okay
so that's how we can conditionally
output template
when we're waiting for data that we
fetch
now there's multiple ways of doing this
of waiting for data
especially in view three and we might
use a few different ways as we go
forward this is just
one of them
Related queries:
how to get data from api in vue js
vue fetch data from api example
fetch api javascript get example
fetch vs get api
how to fetch an api in javascript
