1 00:00:09,280 --> 00:00:16,750 Hello, in the previous video, we've made a request to the Open Trivia API, we received the response. 2 00:00:16,750 --> 00:00:22,210 We are sending it to the council, as you can see it here and now we're going to learn how to work with 3 00:00:22,210 --> 00:00:23,070 the response. 4 00:00:23,380 --> 00:00:32,050 So at this moment, we only have a piece of string, which is a JSON that we receive back from the service, 5 00:00:32,320 --> 00:00:34,080 and now we're going to pass it. 6 00:00:34,540 --> 00:00:39,090 But before we do this, I want to show you something very, very interesting. 7 00:00:39,790 --> 00:00:48,910 Everything that we request from our page to an external service can be seen here in the network tab. 8 00:00:50,090 --> 00:00:58,100 So as you can see, there's a call for an API, I'm going to refresh the page now, and if we go back 9 00:00:58,100 --> 00:01:04,070 to the console, let's see, there's something to do with Sherlock Holmes in this question. 10 00:01:04,430 --> 00:01:09,620 If I go to the network and I see this last request made. 11 00:01:10,640 --> 00:01:17,360 Let me just put it a bit bigger like this, you can go on prevue and you can actually see the response 12 00:01:17,540 --> 00:01:22,940 that came from this request and we can see it as a JavaScript object. 13 00:01:23,150 --> 00:01:25,990 So as you can see, this is an object. 14 00:01:26,000 --> 00:01:30,410 So we have two properties, response code and results. 15 00:01:30,980 --> 00:01:32,360 Let's go inside results. 16 00:01:33,230 --> 00:01:34,270 This is a list. 17 00:01:34,670 --> 00:01:36,050 This is an array. 18 00:01:36,590 --> 00:01:39,980 And now we have the first element of this array. 19 00:01:40,400 --> 00:01:43,340 And here we have all the information. 20 00:01:43,340 --> 00:01:49,920 We want to be able to present the question and the answers for the users. 21 00:01:50,210 --> 00:01:56,420 So here we have the question and we have the incorrect answers and the correct answer. 22 00:01:57,480 --> 00:02:03,720 In order to show this to the user, we're going to have to shuffle them so we can just makes the correct 23 00:02:03,720 --> 00:02:10,490 answer with the incorrect ones if we go to Instagram to that first example I showed. 24 00:02:10,920 --> 00:02:12,720 So let's go to Instagram. 25 00:02:17,090 --> 00:02:20,960 I'm going to do the same thing here, so I'm just going to go to the inspector. 26 00:02:21,140 --> 00:02:25,220 Let's go to network and now I'm going to search for JavaScript again. 27 00:02:25,490 --> 00:02:26,780 So JavaScript. 28 00:02:28,070 --> 00:02:34,800 As you can see, we received the results and we can see many calls to the API here. 29 00:02:35,480 --> 00:02:43,250 These have been canceled, as you can see the status, just because when we start typing, it already 30 00:02:43,280 --> 00:02:45,710 initiates the request. 31 00:02:45,980 --> 00:02:47,570 But then we keep typing. 32 00:02:47,570 --> 00:02:48,620 It cancels it. 33 00:02:48,860 --> 00:02:51,040 And when we finished typing. 34 00:02:51,320 --> 00:02:53,390 So this is probably the last one. 35 00:02:53,570 --> 00:02:55,580 As you can see, we have the status. 36 00:02:55,940 --> 00:02:56,690 Two hundred. 37 00:02:57,110 --> 00:03:01,130 So let's click here if you go to preview. 38 00:03:02,480 --> 00:03:09,860 Here you have the actual response and on preview is a better view to it's showing like a JavaScript 39 00:03:09,860 --> 00:03:12,110 object where we can open things. 40 00:03:12,350 --> 00:03:14,750 So it's better to analyze the response. 41 00:03:15,170 --> 00:03:16,430 So we have that list. 42 00:03:16,790 --> 00:03:22,400 So as you can see, we receive back some hash tags, places and users. 43 00:03:22,730 --> 00:03:27,830 Those first four results here are users. 44 00:03:27,860 --> 00:03:31,550 So if we go here, we have this position. 45 00:03:31,550 --> 00:03:35,790 So position zero, let's see if it matches that first result. 46 00:03:36,260 --> 00:03:44,150 So if we open it here, so here we have we have the username JavaScript that James, which is exactly 47 00:03:44,420 --> 00:03:45,620 what is showing there. 48 00:03:45,650 --> 00:03:53,390 We have the URL for the profile picture and many, many more information about each of these results. 49 00:03:53,480 --> 00:03:56,380 So if I'm following those pages or not. 50 00:03:56,660 --> 00:04:02,620 So all of this is used by Instagram to improve the usability of the website. 51 00:04:02,870 --> 00:04:11,000 So I just thought it would be cool to show you this because every HTP request that is done from a website 52 00:04:11,300 --> 00:04:14,570 can be seen from the network tab. 53 00:04:14,930 --> 00:04:20,870 So you should always go here if you want to learn more about stuff, if you want to understand what's 54 00:04:20,870 --> 00:04:22,430 going on behind the scenes. 55 00:04:22,790 --> 00:04:28,900 So for now, we can go back to the console and we can start working on this response. 56 00:04:29,780 --> 00:04:32,960 What we need to do here is just really simple stuff. 57 00:04:32,960 --> 00:04:40,430 We just need to get what's interesting to us, which are the question and the answers, and we just 58 00:04:40,430 --> 00:04:43,760 need to pass them so we can start working with them. 59 00:04:44,860 --> 00:04:46,740 So let's go back to Visual Studio. 60 00:04:47,510 --> 00:04:51,530 We are going to send the question to the council. 61 00:04:51,580 --> 00:04:55,030 So let's right the question is. 62 00:05:00,080 --> 00:05:06,650 And now let's try to isolate only the question, so how can we do this, let's create a variable called 63 00:05:06,650 --> 00:05:07,340 question. 64 00:05:15,680 --> 00:05:19,400 So for this, we're going to use the Jason. 65 00:05:20,380 --> 00:05:27,140 Object, so, Jason, that pass to transform this into a JavaScript object. 66 00:05:27,460 --> 00:05:33,130 Now we have the response text into a JavaScript object. 67 00:05:33,430 --> 00:05:35,350 Actually, let's separate this. 68 00:05:37,190 --> 00:05:40,520 Let's create a variable called response. 69 00:05:42,430 --> 00:05:43,210 Object. 70 00:05:44,450 --> 00:05:52,460 So now we know that we have that as an object and now let's create another one just for the question. 71 00:05:53,690 --> 00:06:00,630 And now the question is going to be inside here, so let's go to the network tab to understand where 72 00:06:00,680 --> 00:06:03,290 is the question inside this object. 73 00:06:04,840 --> 00:06:13,600 So going back there, going to the network tab, let's see the preview here, so inside our object, 74 00:06:13,930 --> 00:06:15,910 we will have a results. 75 00:06:17,150 --> 00:06:18,860 Property, so. 76 00:06:20,120 --> 00:06:29,630 Response object dot results, then inside it, we have an array with just one element, so we just need 77 00:06:29,630 --> 00:06:33,740 to go inside the first one, which has the index of zero. 78 00:06:34,970 --> 00:06:35,810 So zero. 79 00:06:36,760 --> 00:06:38,980 Inside it, we have. 80 00:06:40,660 --> 00:06:42,940 A property called question. 81 00:06:50,990 --> 00:06:57,000 And now we should be able to isolate the question and send it to the council, so that's right. 82 00:06:57,020 --> 00:07:00,920 The question is send a question to the council. 83 00:07:02,720 --> 00:07:04,760 And let's test this. 84 00:07:06,660 --> 00:07:09,310 I'm just going to go back to the console here. 85 00:07:09,570 --> 00:07:11,280 Let's refresh the page. 86 00:07:12,030 --> 00:07:19,710 And now, as you can see, we just got a brand new question from the API and we are showing it in the 87 00:07:19,710 --> 00:07:20,270 console. 88 00:07:20,610 --> 00:07:26,760 So when we start making our actual trivia game, we're going to show a question here in the middle of 89 00:07:26,760 --> 00:07:28,320 the screen, a big one. 90 00:07:28,530 --> 00:07:34,710 And we're going to present the answers down here so the user can guess the answer. 91 00:07:35,040 --> 00:07:40,260 Every time we refresh the page, we're going to get a new question from the API. 92 00:07:40,260 --> 00:07:42,300 So let's try it out now. 93 00:07:42,300 --> 00:07:43,850 We have a different question. 94 00:07:44,310 --> 00:07:45,240 Let's try again. 95 00:07:46,280 --> 00:07:48,350 All right, so this is looking good. 96 00:07:48,650 --> 00:07:53,750 Don't worry about these things at the moment, these are age HTML entities. 97 00:07:54,020 --> 00:07:59,100 When we send this to our page, this is going to render correctly. 98 00:07:59,210 --> 00:08:04,840 So now, just so we can practice a little bit, let's also show the answers down here. 99 00:08:05,120 --> 00:08:08,060 So let's go back to Visual Studio Code. 100 00:08:10,830 --> 00:08:18,120 And now that we have the response object, we already put the question inside a variable, let's do 101 00:08:18,120 --> 00:08:20,070 the same thing with the answers. 102 00:08:20,310 --> 00:08:21,660 So answers. 103 00:08:23,010 --> 00:08:28,410 This is going to be an array, so the first thing we are going to do is just get this. 104 00:08:29,840 --> 00:08:32,960 But now, instead of question, let's go back there. 105 00:08:35,050 --> 00:08:36,760 Let's go to network. 106 00:08:43,590 --> 00:08:47,910 So instead of the question, we want the incorrect answers. 107 00:08:52,200 --> 00:08:59,660 And now we also need to include the correct answers so we can show all of them so we can do answers, 108 00:09:00,360 --> 00:09:09,270 don't push, because if we go back there, we will see that we have an array here for the incorrect 109 00:09:09,270 --> 00:09:12,750 answers, but for the correct answer. 110 00:09:12,990 --> 00:09:14,640 This is just a string. 111 00:09:14,850 --> 00:09:18,500 So we're going to add this element to this array. 112 00:09:18,750 --> 00:09:25,920 And in order to do this, we can do answers that push and then we can do it like this. 113 00:09:26,350 --> 00:09:31,100 Let's check the the correct name of the property. 114 00:09:31,110 --> 00:09:31,470 So. 115 00:09:32,560 --> 00:09:37,000 The name is correct, underscore and sir, let's copy this. 116 00:09:38,230 --> 00:09:41,410 So now we are putting all the answers together. 117 00:09:42,930 --> 00:09:46,820 And let's send it to the council as well. 118 00:09:47,830 --> 00:09:49,630 So the answer's. 119 00:09:54,080 --> 00:09:58,730 Ah, and then we can just present all the possible answers. 120 00:09:59,930 --> 00:10:05,930 So by doing this, let's go back there, let's go back to the console, refresh the page. 121 00:10:07,810 --> 00:10:14,670 And here it is, this is exactly what we're going to need when we start working on our project. 122 00:10:14,770 --> 00:10:17,890 So here we have the question in what we're worth. 123 00:10:17,910 --> 00:10:24,600 Screenshots added to steam have no idea what this is, but here we have all the answers. 124 00:10:24,820 --> 00:10:33,250 We know that the correct answer in this case is always going to be the last one because we've just used 125 00:10:33,250 --> 00:10:34,840 the push method. 126 00:10:35,050 --> 00:10:37,180 So if we go to network. 127 00:10:38,700 --> 00:10:40,830 Let's check the correct answer. 128 00:10:42,100 --> 00:10:44,380 Which is 2011. 129 00:10:45,270 --> 00:10:52,470 And this is always going to be at the end of the array, and this is a problem because if the last one 130 00:10:52,470 --> 00:10:59,640 is always the correct one, then over time the user is going to notice this and our game is going to 131 00:10:59,640 --> 00:11:01,390 become a really, really easy. 132 00:11:01,680 --> 00:11:04,710 So every time we present the answers to the users. 133 00:11:05,610 --> 00:11:11,430 We're going to have to shuffle this array, so the correct answer is always at a different position, 134 00:11:11,700 --> 00:11:15,000 but this is something that we don't have to worry about right now. 135 00:11:15,580 --> 00:11:19,950 All I wanted to do for the moment was being able to work with the response. 136 00:11:20,130 --> 00:11:21,570 So we are getting the question. 137 00:11:21,780 --> 00:11:25,280 We're getting the answers, which is really, really cool. 138 00:11:25,650 --> 00:11:33,450 Before we go ahead, in the next video, we're going to talk about how to do AJAX requests using Jay 139 00:11:33,470 --> 00:11:40,530 Quarrie because it's actually much easier than doing it with just plain JavaScript like we've been doing 140 00:11:40,530 --> 00:11:40,850 here. 141 00:11:41,010 --> 00:11:43,920 So let's see how we can do it with Jay Querrey. 142 00:11:43,950 --> 00:11:48,030 And in our project, we are going to do everything using Jay Querrey. 143 00:11:48,210 --> 00:11:49,770 So I'll see you in the next video.