1
00:00:00,000 --> 00:00:04,993
Now that we're successfully getting data
asynchronously from the open notify API,

2
00:00:04,993 --> 00:00:09,241
let's use it to make another Ajax call,
this time to the Wikipedia API.

3
00:00:09,241 --> 00:00:13,659
You've learned that a function can be
passed to another function as an argument.

4
00:00:13,659 --> 00:00:17,223
To do that, we need to specify
as a regular function parameter.

5
00:00:17,223 --> 00:00:22,232
So let's have getJSON accept
a function as its second argument.

6
00:00:22,232 --> 00:00:26,061
I'll provide getJSON with a second
parameter named callback.

7
00:00:26,061 --> 00:00:31,708
This represents a function that's going to
be passed into any getJSON function call.

8
00:00:31,708 --> 00:00:33,736
It's going to get callback and

9
00:00:33,736 --> 00:00:38,109
executed at a later time using
the value returned by the Ajax call.

10
00:00:38,109 --> 00:00:41,141
It should be called as soon as
the server sends back the response and

11
00:00:41,141 --> 00:00:42,236
it gets parsed to JSON.

12
00:00:42,236 --> 00:00:47,415
So I'll replace the console.log
method with the return keyword and

13
00:00:47,415 --> 00:00:53,403
a call to the callback function and pass
it the parse data via the variable data.

14
00:00:53,403 --> 00:00:56,742
You don't have to use the word
callback as the parameter name.

15
00:00:56,742 --> 00:00:57,469
You can name it anything.

16
00:00:57,469 --> 00:01:00,545
callback is just a name I used,
and one you'll commonly see.

17
00:01:00,545 --> 00:01:05,621
So getJSON is now what's called
a higher order function.

18
00:01:05,621 --> 00:01:09,829
A higher order function takes one or
more functions as arguments or

19
00:01:09,829 --> 00:01:12,016
returns a function as its result.

20
00:01:12,016 --> 00:01:16,860
It can also do both, take a function
as an argument and return the function.

21
00:01:16,860 --> 00:01:20,500
In our case, getJSON is going
to use the first argument,

22
00:01:20,500 --> 00:01:23,300
url, to make the Ajax request.

23
00:01:23,300 --> 00:01:25,751
If there is a valid
response from the server,

24
00:01:25,751 --> 00:01:29,943
it's going to call the function that
gets passed as the second argument, and

25
00:01:29,943 --> 00:01:32,282
provide it the return data in JSON format.

26
00:01:32,282 --> 00:01:34,720
Next, down in our EventListener,

27
00:01:34,720 --> 00:01:39,841
let's pass a callback to getJSON that
will iterate over the return data and

28
00:01:39,841 --> 00:01:44,328
make a get request to the Wikipedia API
for each person returned.

29
00:01:44,328 --> 00:01:48,470
First, since we're going to write
multiple lines of code here in

30
00:01:48,470 --> 00:01:53,916
the EventListener's callback, let's wrap
the call to getJSON with curly braces.

31
00:01:53,916 --> 00:01:58,772
For now I'll pass getJSON an anonymous
function as a second argument.

32
00:01:58,772 --> 00:02:00,623
We'll refactor this later.

33
00:02:00,623 --> 00:02:06,137
The callback will be executed once the
parent function's operations are complete.

34
00:02:06,137 --> 00:02:10,890
So this callback is now receiving
the JSON data passed to it from

35
00:02:10,890 --> 00:02:13,407
its parent function, getJSON.

36
00:02:13,407 --> 00:02:18,475
For example, let's have the parameter
json represent our data,

37
00:02:18,475 --> 00:02:20,930
and if I log json to the console,

38
00:02:24,480 --> 00:02:29,340
you can see the people in space
data when I click the button.

39
00:02:29,340 --> 00:02:31,958
Next, I'll iterate over the returned

40
00:02:31,958 --> 00:02:35,845
people array to get the names
of each astronaut in space and

41
00:02:35,845 --> 00:02:40,385
make an Ajax request to the Wikipedia API
using each returned name.

42
00:02:40,385 --> 00:02:44,452
For this, I'll use the map array
iteration method on json.people.

43
00:02:48,613 --> 00:02:53,537
The map callback will take the parameter
person to represent each person

44
00:02:53,537 --> 00:02:54,995
object in the array.

45
00:02:54,995 --> 00:02:58,391
Inside the map callback, call getJSON and

46
00:02:58,391 --> 00:03:03,496
pass it the URL to the Wikipedia EndPoint
as the first argument.

47
00:03:03,496 --> 00:03:08,600
That URL is stored as a string
in the variable wikiUrl.

48
00:03:08,600 --> 00:03:13,135
Then I'll concatenate
the value of a person object's

49
00:03:13,135 --> 00:03:17,989
name property on each
iteration with + person.name.

50
00:03:17,989 --> 00:03:21,829
So a URL here might be Wikipedia's summary

51
00:03:21,829 --> 00:03:25,998
endpoint forward slash Anne_McLain for
example.

52
00:03:25,998 --> 00:03:28,775
There are currently six people objects, so

53
00:03:28,775 --> 00:03:32,011
this operation should make
six network requests.

54
00:03:32,011 --> 00:03:36,082
Once the function returns the requested
data we'll pass that data on to

55
00:03:36,082 --> 00:03:40,852
the generateHTML function, so that it can
create and append new dom elements and

56
00:03:40,852 --> 00:03:43,042
display each astronaut on the page.

57
00:03:43,042 --> 00:03:46,051
Once again, we'll do this with,
you guessed it, a callback.

58
00:03:46,051 --> 00:03:50,855
So, I'll pass getJSON a reference
to the generateHTML function,

59
00:03:50,855 --> 00:03:53,310
as the second argument, like so.

60
00:03:53,310 --> 00:03:57,574
And notice how I'm not appending
parentheses to generateHTML like this.

61
00:03:57,574 --> 00:04:01,051
I'm using the function name just
like a variable name in this case.

62
00:04:01,051 --> 00:04:04,352
This is because I don't want to
execute the callback right away.

63
00:04:04,352 --> 00:04:08,004
I'm only passing the function
reference along to getJSON so

64
00:04:08,004 --> 00:04:09,875
that it can be executed later.

65
00:04:09,875 --> 00:04:13,737
In other words,
getJSON will call it back or invoke it,

66
00:04:13,737 --> 00:04:17,776
providing it the data it needs
once it becomes available.

67
00:04:17,776 --> 00:04:23,003
Now whenever the getJSON function
is called, a new scope is created.

68
00:04:23,003 --> 00:04:25,995
So the data variable is
uniquely defined within

69
00:04:25,995 --> 00:04:30,333
each initialization of the onload
function handler insuring that it gets

70
00:04:30,333 --> 00:04:34,098
executed with the proper data
on each iteration of the map.

71
00:04:34,098 --> 00:04:35,978
All right, now let's test our code.

72
00:04:35,978 --> 00:04:40,118
I'll save my file in the browser,
refresh the page,

73
00:04:40,118 --> 00:04:44,262
then click the button, and
we can see that it worked.

74
00:04:44,262 --> 00:04:47,360
All six astronauts are displayed
on the page, great.

75
00:04:49,196 --> 00:04:54,179
Finally, let's improve the UI by having
the button disappear from the page once

76
00:04:54,179 --> 00:04:54,849
clicked.

77
00:04:54,849 --> 00:04:56,716
You could do this several different ways.

78
00:04:56,716 --> 00:05:01,127
What I'll do is pass
addEventListener's callback

79
00:05:01,127 --> 00:05:06,624
the event object, then call
the remove method on event.target.

80
00:05:10,502 --> 00:05:14,352
Back in the browser,
click the View button, the data loads, and

81
00:05:14,352 --> 00:05:16,948
the button is removed from the page, good.