How to fetch data from database on button click in javascript
GET Data from API & Display in HTML with JavaScript Fetch API
Timecodes:
hey everyone in this video we will get
some data from an external API and
display it on the page with JavaScript
okay so on the left side I have my HTML
and we're going to write the JavaScript
in script tags here on the right side I
have opened up the project in the
browser and I have opened the console
right you can right click inspect you'll
get the element but we'll use console
here for JavaScript so we want to get
some data from an external API right so
we're using a surface here which will
give us some fake data right so this is
the Json data that we're going to fetch
and then we want to Output it here right
so for now we have an empty list so what
we want to do is that for every user we
create an Li right with their name or
their email let's say I don't know what
they have okay so we'll use email so
let's actually try doing that so we can
use fetch
this is built in in the browser and we
only have to give the address so I'm
gonna copy this I'm gonna paste the URL
here and let me actually show you this
in full now fetch is promise based so we
actually get a promise here you can
consume a promise in two ways you can
tag on dot then or these days you can
also write a wait in front of it I have
a whole video on Fetch and definitely
check it out after this one we'll use
the traditional syntax here and then
usually people format it like this this
will actually already send a request
eventually we get a response and we get
access to the response in here we can
call that response or just res
so let's actually see what we got here
I'm gonna log this I have live servers
so if I save here it will immediately
run this code okay so here let's see let
me actually make this a little bit
bigger for you so here we see a response
object and you know we're not really
interested in everything here what we're
really interested in is the body here
this will actually be the data that we
want but it is something with stream and
this is because initially what we get
here with response is only some headers
some metadata right so you can imagine
there could be a lot of data so we don't
get all of the data immediately right we
have to wait some additional time before
all the data has been streamed in you
could say right so what we're going to
use here is rest.json so with this
method we will wait until everything has
been streamed in and then immediately
parse the data as Json because the data
will come in the format of Json and we
want to convert that from Json into
normal JavaScript right and we will
return this so this one actually also
give us a promise and we are returning
the promise here so we can tack on
another dot then we can chain these dot
dance and whenever the value is with
which This Promise gets fulfilled is
what we get here and that will be the
actual data in normal JavaScript format
right so let's see what we get here
Gonna Save and because of live server it
will automatically make that Network
request okay so now we get the actual
data in normal JavaScript right so now
we can work with this in here now we
haven't done anything with error
handling but typically you also see
something with with a catch right now
again I have a whole video on this so
we're not going to make this very
sophisticated you can watch the other
video for that right but now we have the
data in here we can create this list
right so we can take their name perhaps
or their email right let's actually do
their names right so let's say here in
the UL we want to create an Li for each
of these users so we have data and we
can see it's an array of objects right
so we have data this is an array on an
array you can say for each right so it
will go over each element in the array
each element here is an object
representing a user right so I can call
that user right and what I want to do
with this user is well we want to create
an Li put their name in the Li and then
insert that here in the HTML right so we
can create the the HTML markup for each
user and so I can say markup and it's
nice to use template literals for this
so we can say Li
and then in here we want to have the
username and with template literals we
can use the dollar sign and then write
it like this
right so we're going to get user dot
name
right so it's going to go over right so
this is the array it's going to go over
each each element in the array so first
it's going to take the first one right
Lian it's going to put this object of
that user gonna assign that to user here
and then in here we're going to create a
variable markup with you with that
user's name in the allies right so then
for that particular user we want to
insert that here in the HTML right so I
have to select the UL because that's the
element that we want to insert it in
all right I'm just going to select by
tag I could give it an ID or class but
there's only one UL on the page right so
I can select it like this I could create
a separate variable for it but uh it's
not really necessary here so then in
here we can say well let me actually
make a full screen
insert adjacent HTML so we can insert
this markup at the end of the UL or
right before the end so we can say
before end and then simply mark up right
so what this will do is will it will
take the markup for this particular user
and then it's going to insert it in here
right before the end right so right here
basically that should show the usernames
right and once it's done that for that
particular user right for this one for
Leanne it's gonna go what is four it's a
for each Loop right so then it's going
to assign the second element to User
it's gonna run the same statements for
that user as well right and then it's
going to do it for Clementine as well
right so it's going to go over each one
in the array so now if I save here we
should see the names here right so I'm
Gonna Save
and indeed we see other names right so
this was a quick example of how to get
data from an external API and render it
on the page with JavaScript
![Get Table Row Index onclick in JavaScript [HowToCodeSchool.com]](https://img.youtube.com/vi/ThBLA74eRrY/mqdefault.jpg)
