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.
Mixed Content error
When you're following along in workspaces you may encounter an error in the console saying that the request has been blocked because of trying to request from an insecure endpoint. This happens because the Open Notify API uses the http protocol while Workspaces are on the https protocol.
To work around this you can download the code and follow along in your own text editor. Alternatively, you can add the url of your workspace preview to the exceptions in your browser settings:
- Chrome:
chrome://settings/content/insecureContent - FireFox: Unblock Mixed Content
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 generateHTML 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 innerHTML 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 getJSON 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 astrosUrl.
2:35
getJSON 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
executes the code inside 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 addEventListener
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
3:34
addEventListener.
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 times when browsers
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up