1 00:00:00,195 --> 00:00:04,152 To get started and code along with me, you can launch the workspace with this video, 2 00:00:04,152 --> 00:00:07,624 or download the project files and open them in your favorite text editor. 3 00:00:07,624 --> 00:00:09,724 I'm going to use Visual Studio Code. 4 00:00:09,724 --> 00:00:14,203 In the project folder, you should see the file index.html, and 5 00:00:14,203 --> 00:00:16,000 two folders, css and js. 6 00:00:16,000 --> 00:00:19,576 The css folder contains the style sheet for this project, and 7 00:00:19,576 --> 00:00:22,547 the js folder contains several JavaScript files. 8 00:00:22,547 --> 00:00:26,761 You're going to learn how to build the API project using callbacks, promises, and 9 00:00:26,761 --> 00:00:28,853 async-await starting with callbacks. 10 00:00:28,853 --> 00:00:33,069 So I named each file according to the tools and technique we're going to use. 11 00:00:33,069 --> 00:00:34,833 First, open callbacks.js and 12 00:00:34,833 --> 00:00:38,694 you will see that I've already provided some code to get you started. 13 00:00:38,694 --> 00:00:42,387 At the top, I initialized the variables that we'll use in our project. 14 00:00:42,387 --> 00:00:46,508 For example, a URL to the API dot open notify endpoint which 15 00:00:46,508 --> 00:00:51,454 returns all people currently in space, a Wikipedia API endpoint, and 16 00:00:51,454 --> 00:00:55,921 a couple of variables that reference elements in index.html. 17 00:00:55,921 --> 00:01:00,065 The function getJSON uses XMLHttpRequest, or xhr, 18 00:01:00,065 --> 00:01:06,243 to retrieve data from a server via a URL without having to do a full page refresh. 19 00:01:06,243 --> 00:01:10,210 xhr is commonly used by developers to make ajax calls. 20 00:01:10,210 --> 00:01:14,200 It's one of the web APIs you learned about earlier that the browser uses to manage 21 00:01:14,200 --> 00:01:15,840 asynchronous requests. 22 00:01:15,840 --> 00:01:18,357 You can learn a whole lot more about XHR in the videos and 23 00:01:18,357 --> 00:01:21,657 additional resources posted in the teacher's notes with this video. 24 00:01:21,657 --> 00:01:26,758 So the getJSON function initializes an XMLHttpRequest, then gets 25 00:01:26,758 --> 00:01:32,853 the browser ready to make a GET request to the provided URL and sends the request. 26 00:01:32,853 --> 00:01:38,255 XHR request also accept a callback so as soon as the server sent back its response, 27 00:01:38,255 --> 00:01:42,818 it runs the callback function that's assigned to the onload event. 28 00:01:42,818 --> 00:01:46,475 In this case it's checking the server response readystate and 29 00:01:46,475 --> 00:01:49,442 status then parsing the response text to json, and 30 00:01:49,442 --> 00:01:52,342 finally logging that data to the console for now. 31 00:01:52,342 --> 00:01:57,122 Anytime the request changes, this callback function is going to fire and 32 00:01:57,122 --> 00:01:58,290 update the data. 33 00:01:58,290 --> 00:02:03,992 Right below, the function generateHTML creates a new section element for 34 00:02:03,992 --> 00:02:08,891 each person in space and appends it to the div with the ID people, 35 00:02:08,891 --> 00:02:13,644 then sets the innerHTML to the markup defined in the template literal using 36 00:02:13,644 --> 00:02:15,766 the data passed to the function. 37 00:02:15,766 --> 00:02:18,533 So this is essentially the HTML template for 38 00:02:18,533 --> 00:02:23,861 displaying an astronaut's picture as well as their name, title, and a short bio. 39 00:02:23,861 --> 00:02:27,923 All right, now that you're up to speed with the starter code, let's get coding! 40 00:02:27,923 --> 00:02:30,817 First I'm going to call the getJSON function and 41 00:02:30,817 --> 00:02:35,131 pass it the URL to the open notify API to make sure that everything works. 42 00:02:35,131 --> 00:02:38,844 The URL is stored in the variable astrosUrl. 43 00:02:38,844 --> 00:02:43,506 getJSON currently logs the return data to the console. 44 00:02:43,506 --> 00:02:45,825 So checking the console, I see that it works. 45 00:02:45,825 --> 00:02:50,197 The API returns an object with a people array which holds six objects. 46 00:02:50,197 --> 00:02:53,530 So that means that there are currently six people in space. 47 00:02:53,530 --> 00:02:57,330 And we can see the craft and name properties in each object. 48 00:02:57,330 --> 00:03:01,870 Back on our code, the getJSON function is going to be invoked and 49 00:03:01,870 --> 00:03:07,187 executes the code inside it after some event or user interaction happens. 50 00:03:07,187 --> 00:03:10,683 In this case when the View all the People button is clicked. 51 00:03:10,683 --> 00:03:13,583 So let's create an event listener for 52 00:03:13,583 --> 00:03:19,570 the button using the addEventListener method with btn.addEventListener. 53 00:03:19,570 --> 00:03:24,320 Pass it the string, click, as the event type to listen for. 54 00:03:24,320 --> 00:03:30,233 Next, as the second argument, I'll pass an anonymous function as the callback, 55 00:03:30,233 --> 00:03:34,293 which will run getJSON as soon as the click event occurs. 56 00:03:34,293 --> 00:03:39,138 I could have passed the body of the getJSON function entirely to 57 00:03:39,138 --> 00:03:40,444 addEventListener. 58 00:03:40,444 --> 00:03:44,231 But this approach is much cleaner and modular as you'll soon see. 59 00:03:44,231 --> 00:03:49,070 DOM events like click, scroll, and key up are highly intermittent. 60 00:03:49,070 --> 00:03:53,038 They happen randomly, and the browser cannot predict when they happen. 61 00:03:53,038 --> 00:03:56,970 For example, the browser doesn't exactly know when this button will be clicked. 62 00:03:56,970 --> 00:03:59,156 It may never be clicked at all by the user. 63 00:03:59,156 --> 00:04:03,169 So addEventListener waits for the click event to happen. 64 00:04:03,169 --> 00:04:07,552 And it calls back the function passed to it only when the event occurs. 65 00:04:07,552 --> 00:04:10,499 In our case it's going to invoke getJSON and 66 00:04:10,499 --> 00:04:13,774 use the URL passed to it to make the Ajax request. 67 00:04:13,774 --> 00:04:16,104 There are times when browsers may be flooded and 68 00:04:16,104 --> 00:04:18,909 overwhelmed by different events happening all at once. 69 00:04:18,909 --> 00:04:23,220 Now imagine if each of those events blocked other functions from executing. 70 00:04:23,220 --> 00:04:28,144 So because of this, the order of DOM events is processed asynchronously. 71 00:04:28,144 --> 00:04:32,661 A click on an element with a click event handler, for example, will add a task to 72 00:04:32,661 --> 00:04:36,515 the callback queue which might have other events waiting in queue. 73 00:04:36,515 --> 00:04:40,149 Each will eventually make its way onto the call stack to be executed. 74 00:04:40,149 --> 00:04:42,478 All right, let's test our code. 75 00:04:42,478 --> 00:04:46,044 Back in the browser I'll refresh and when I click the button, 76 00:04:46,044 --> 00:04:49,965 the data from the open notify API gets logged to the console, good!