Preview
Video Player
00:00
00:00
Implement a Callback
5:21Now that we're successfully getting data asynchronously from the Open Notify API, let's use it to make another AJAX call, this time to the Wikipedia API.
Now that we're successfully getting data
asynchronously from the open notify API,
0:00
let's use it to make another Ajax call,
this time to the Wikipedia API.
0:04
You've learned that a function can be
passed to another function as an argument.
0:09
To do that, we need to specify
as a regular function parameter.
0:13
So let's have getJSON accept
a function as its second argument.
0:17
I'll provide getJSON with a second
parameter named callback.
0:22
This represents a function that's going to
be passed into any getJSON function call.
0:26
It's going to get callback and
0:31
executed at a later time using
the value returned by the Ajax call.
0:33
It should be called as soon as
the server sends back the response and
0:38
it gets parsed to JSON.
0:41
So I'll replace the console.log
method with the return keyword and
0:42
a call to the callback function and pass
it the parse data via the variable data.
0:47
You don't have to use the word
callback as the parameter name.
0:53
You can name it anything.
0:56
callback is just a name I used,
and one you'll commonly see.
0:57
So getJSON is now what's called
a higher order function.
1:00
A higher order function takes one or
more functions as arguments or
1:05
returns a function as its result.
1:09
It can also do both, take a function
as an argument and return the function.
1:12
In our case, getJSON is going
to use the first argument,
1:16
url, to make the Ajax request.
1:20
If there is a valid
response from the server,
1:23
it's going to call the function that
gets passed as the second argument, and
1:25
provide it the return data in JSON format.
1:29
Next, down in our EventListener,
1:32
let's pass a callback to getJSON that
will iterate over the return data and
1:34
make a get request to the Wikipedia API
for each person returned.
1:39
First, since we're going to write
multiple lines of code here in
1:44
the EventListener's callback, let's wrap
the call to getJSON with curly braces.
1:48
For now I'll pass getJSON an anonymous
function as a second argument.
1:53
We'll refactor this later.
1:58
The callback will be executed once the
parent function's operations are complete.
2:00
So this callback is now receiving
the JSON data passed to it from
2:06
its parent function, getJSON.
2:10
For example, let's have the parameter
json represent our data,
2:13
and if I log json to the console,
2:18
you can see the people in space
data when I click the button.
2:24
Next, I'll iterate over the returned
2:29
people array to get the names
of each astronaut in space and
2:31
make an Ajax request to the Wikipedia API
using each returned name.
2:35
For this, I'll use the map array
iteration method on json.people.
2:40
The map callback will take the parameter
person to represent each person
2:48
object in the array.
2:53
Inside the map callback, call getJSON and
2:54
pass it the URL to the Wikipedia EndPoint
as the first argument.
2:58
That URL is stored as a string
in the variable wikiUrl.
3:03
Then I'll concatenate
the value of a person object's
3:08
name property on each
iteration with + person.name.
3:13
So a URL here might be Wikipedia's summary
3:17
endpoint forward slash Anne_McLain for
example.
3:21
There are currently six people objects, so
3:25
this operation should make
six network requests.
3:28
Once the function returns the requested
data we'll pass that data on to
3:32
the generateHTML function, so that it can
create and append new dom elements and
3:36
display each astronaut on the page.
3:40
Once again, we'll do this with,
you guessed it, a callback.
3:43
So, I'll pass getJSON a reference
to the generateHTML function,
3:46
as the second argument, like so.
3:50
And notice how I'm not appending
parentheses to generateHTML like this.
3:53
I'm using the function name just
like a variable name in this case.
3:57
This is because I don't want to
execute the callback right away.
4:01
I'm only passing the function
reference along to getJSON so
4:04
that it can be executed later.
4:08
In other words,
getJSON will call it back or invoke it,
4:09
providing it the data it needs
once it becomes available.
4:13
Now whenever the getJSON function
is called, a new scope is created.
4:17
So the data variable is
uniquely defined within
4:23
each initialization of the onload
function handler insuring that it gets
4:25
executed with the proper data
on each iteration of the map.
4:30
All right, now let's test our code.
4:34
I'll save my file in the browser,
refresh the page,
4:35
then click the button, and
we can see that it worked.
4:40
All six astronauts are displayed
on the page, great.
4:44
Finally, let's improve the UI by having
the button disappear from the page once
4:49
clicked.
4:54
You could do this several different ways.
4:54
What I'll do is pass
addEventListener's callback
4:56
the event object, then call
the remove method on event.target.
5:01
Back in the browser,
click the View button, the data loads, and
5:10
the button is removed from the page, good.
5:14