Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's start by working with callbacks to fetch data. Fetching data is one of the most common ways you will write asynchronous programs in JavaScript.
To get started and code along with me, you
can launch the workspace with this video,
0:00
or download the project files and
open them in your favorite text editor.
0:04
I'm going to use Visual Studio Code.
0:07
In the project folder,
you should see the file index.html, and
0:09
two folders, css and js.
0:14
The css folder contains the style
sheet for this project, and
0:16
the js folder contains
several JavaScript files.
0:19
You're going to learn how to build the API
project using callbacks, promises, and
0:22
async-await starting with callbacks.
0:26
So I named each file according to the
tools and technique we're going to use.
0:28
First, open callbacks.js and
0:33
you will see that I've already
provided some code to get you started.
0:34
At the top, I initialized the variables
that we'll use in our project.
0:38
For example, a URL to the API
dot open notify endpoint which
0:42
returns all people currently in space,
a Wikipedia API endpoint, and
0:46
a couple of variables that
reference elements in index.html.
0:51
The function GetJSON uses XMLHttpRequest,
or xhr,
0:55
to retrieve data from a server via a URL
without having to do a full page refresh.
1:00
xhr is commonly used by
developers to make ajax calls.
1:06
It's one of the web APIs you learned about
earlier that the browser uses to manage
1:10
asynchronous requests.
1:14
You can learn a whole lot more
about XHR in the videos and
1:15
additional resources posted in
the teacher's notes with this video.
1:18
So the getJSON function initializes
an XMLHttpRequest, then gets
1:21
the browser ready to make a GET request to
the provided URL and sends the request.
1:26
XHR request also accept a callback so as
soon as the server sent back its response,
1:32
it runs the callback function that's
assigned to the onload event.
1:38
In this case it's checking
the server response readystate and
1:42
status then parsing
the response text to json, and
1:46
finally logging that data
to the console for now.
1:49
Anytime the request changes, this
callback function is going to fire and
1:52
update the data.
1:57
Right below, the function generate
HTML creates a new section element for
1:58
each person in space and
appends it to the div with the ID people.
2:03
Then sets the inner HTML to the markup
defined in the template Literal using
2:08
the data passed to the function.
2:13
So this is essentially
the HTML template for
2:15
displaying an astronaut's picture as well
as their name, title, and a short bio.
2:18
All right, now that you're up to speed
with the starter code, let's get coding!
2:23
First I'm going to call
the get JSON function and
2:27
pass it the URL to the open notify API
to make sure that everything works.
2:30
The URL is stored in
the variable Astros' URL.
2:35
Get JSON currently logs
the return data to the console.
2:38
So checking the console,
I see that it works.
2:43
The API returns an object with a people
array which holds six objects.
2:45
So that means that there
are currently six people in space.
2:50
And we can see the craft and
name properties in each object.
2:53
Back on our code, the getJSON
function is going to be invoked and
2:57
execute the code and cite it after some
event or user interaction happens.
3:01
In this case when the View all
the People button is clicked.
3:07
So let's create an event listener for
3:10
the button using the add Event Listener
method with btn.addEventListener.
3:13
Pass it the string, click,
as the event type to listen for.
3:19
Next, as the second argument, I'll pass
an anonymous function as the callback,
3:24
which will run getJSON as soon
as the click event occurs.
3:30
I could have passed the body of
the getJSON function entirely to add
3:34
event listener.
3:39
But this approach is much cleaner and
modular as you'll soon see.
3:40
DOM events like click, scroll, and
key up are highly intermittent.
3:44
They happen randomly, and the browser
cannot predict when they happen.
3:49
For example, the browser doesn't exactly
know when this button will be clicked.
3:53
It may never be clicked
at all by the user.
3:56
So addEventListener waits for
the click event to happen.
3:59
And it calls back the function passed
to it only when the event occurs.
4:03
In our case it's going
to invoke getJSON and
4:07
use the URL passed to it
to make the Ajax request.
4:10
There are time when browser
is may be flooded and
4:13
overwhelmed by different
events happening all at once.
4:16
Now imagine if each of those events
blocked other functions from executing.
4:18
So because of this, the order of DOM
events is processed asynchronously.
4:23
A click on an element with a click event
handler, for example, will add a task to
4:28
the callback queue which might have
other events waiting in queue.
4:32
Each will eventually make its way
onto the call stack to be executed.
4:36
All right, let's test our code.
4:40
Back in the browser I'll refresh and
when I click the button,
4:42
the data from the open notify API
gets logged to the console, good!
4:46
You need to sign up for Treehouse in order to download course files.
Sign up