WEBVTT 0 00:00.180 --> 00:09.060 Now in the last lesson, we saw how we could use the native Node HTTPS module to perform a GET request 1 00:09.450 --> 00:13.530 across the Internet using the HTTPS protocol. 2 00:13.540 --> 00:17.250 Now we passed in a URL, which is this one. 3 00:17.250 --> 00:22.980 And once we got a response back, we simply just logged the response. 4 00:22.980 --> 00:26.220 Now, if we wanted to, we can actually be more specific. 5 00:26.280 --> 00:31.290 We can actually log the status code that was associated with the response. 6 00:31.710 --> 00:39.120 So if I go back to my browser and hit enter to refresh, I'll be able to trigger my code again, and we'll 7 00:39.120 --> 00:43.570 be able to scroll to the bottom and see the response code that was printed. 8 00:43.650 --> 00:46.210 So we got 200. 9 00:46.380 --> 00:53.160 Now, if you're curious what 200 means, then you can head over to the MDN web docs and take a look at all 10 00:53.160 --> 00:58.780 the response codes that you could possibly get back from your HTTP requests. 11 00:58.800 --> 01:05.730 Now, they kind of fall into broad categories, the one hundreds are sort of informational, the two hundreds 12 01:05.730 --> 01:07.560 are usually a really good sign, 13 01:07.650 --> 01:13.160 the three hundreds refer to redirect web sites, which normally you don't encounter, 14 01:13.350 --> 01:19.440 the fours are interesting because they usually mean that the client, or the user, who's interacting with 15 01:19.440 --> 01:21.490 your web site made some sort of error, 16 01:21.510 --> 01:26.840 and finally the fives are an error on the server. But you can actually dig into it. 17 01:26.850 --> 01:31.270 So, for example, 200 specifically means just a OK, 18 01:31.470 --> 01:36.750 the request is successful. And because we were making a get request, then it means the resource has been 19 01:36.750 --> 01:42.160 fetched and it's transmitted to the message body. That is the best outcome that we could get 20 01:42.180 --> 01:46.090 when we’re making an HTTP request to an external server. 21 01:46.200 --> 01:50.460 Now, however, we could be getting one of these other ones. 22 01:50.460 --> 01:56.210 Now the one that you've often seen on the Internet, if you've spent any time on the Internet, is the 404, 23 01:56.250 --> 02:03.030 and this corresponds to the server that you made the request to cannot find the requested resource, 24 02:03.030 --> 02:06.450 so basically it's a resource not found. 25 02:06.450 --> 02:11.490 Now, we can trigger this quite easily by simply changing one of these paths. 26 02:11.550 --> 02:17.400 So instead of calling it weather, let's say we made a typo and we wrote weatheer instead. 27 02:17.400 --> 02:22.870 Now if I hit save, go back, refresh my web site, go to my Hyper terminal, 28 02:22.890 --> 02:29.040 you can see I'm getting 404. The OpenWeatherMap server is basically telling me that this resource 29 02:29.040 --> 02:32.820 that you're looking for at this path, weatheer, does not exist. 30 02:33.600 --> 02:36.270 So let's restore our path. 31 02:36.420 --> 02:43.670 Now, another type of error you'll often get is when you have to authenticate yourselves with an API provider. 32 02:43.680 --> 02:50.490 Let's say that you had made an error in the app ID. So let's just botch our app ID by adding an extra 33 02:50.490 --> 02:52.070 character in front of it. 34 02:52.140 --> 02:55.730 Now I'm going to hit save, refresh my web site, 35 02:55.800 --> 02:59.880 now go back to my Hyper terminal, and you'll see I'm getting a 401. 36 03:00.000 --> 03:06.660 And, if we look it up, a 401 refers to an unauthorized HTTP request. 37 03:06.660 --> 03:13.450 So this is because we did not authenticate ourselves properly with the right app ID. 38 03:13.440 --> 03:18.460 So let's delete that extra character, go back and refresh, 39 03:18.600 --> 03:21.800 and we now get our 200. 40 03:21.840 --> 03:23.250 This is what we're looking for 41 03:23.280 --> 03:29.310 most of the time. But very often, when we're testing APIs, when we're working with external servers, we're very 42 03:29.310 --> 03:31.440 likely to get different messages back. 43 03:31.440 --> 03:38.460 So when you do, have a look at the documentation on Mozilla, and match it with the corresponding code 44 03:38.670 --> 03:41.690 to see what's happened. There’s some pretty funny ones in here 45 03:41.700 --> 03:48.270 if you actually read it, including the error code 401, I'm a teapot. 46 03:48.270 --> 03:54.130 The server refuses to attempt to brew coffee with the teapot. And this is just a little remnant leftover 47 03:54.510 --> 04:00.450 from some past April Fools joke, although you might one day encounter a server that actually does give 48 04:00.450 --> 04:08.550 you that code. Now, if you're interested in a bit of light hearted entertainment, there's also the HTTP status 49 04:08.550 --> 04:16.770 dogs, which basically uses dogs from the Internet to represent each of these codes, like 200, 50 04:17.250 --> 04:25.500 or 404, Not Found, 401, Unauthorized, etc., and it's pretty hilarious to look through. 51 04:25.580 --> 04:32.330 Now, in addition to checking the status code, we can also tap into the response that we get back, and call 52 04:32.330 --> 04:37.430 a method called on, and search through it for some data. 53 04:37.430 --> 04:44.030 Now this will correspond to the actual message body that we got back, that OpenWeatherMap has actually 54 04:44.030 --> 04:44.850 sent us. 55 04:44.900 --> 04:50.370 So let's try to implement this method. Because our response is spelt out fully, 56 04:50.390 --> 04:57.230 we’ll have to tap in to response. and then we're calling the on method, and then inside the on method, 57 04:57.350 --> 05:03.410 we can tap into a specific moment, say when we receive some data in the response. 58 05:03.860 --> 05:11.120 So let's first call the response on when we receive some data. And I'm going to create a callback function 59 05:11.450 --> 05:18.890 that's going to contain the data that we get, and then I'm just going to log the data. 60 05:18.890 --> 05:26.400 Now let's hit save and go over to our web site, refresh, and check out the response in our terminal. 61 05:26.480 --> 05:32.090 You can see that we're getting the response code 200, which means everything is working, but the data 62 05:32.120 --> 05:35.100 that we're printing out looks a little bit funny. 63 05:35.150 --> 05:39.640 It seems to be all jumbled up and we can't really make much sense of it. 64 05:39.650 --> 05:41.750 So what exactly is this? 65 05:41.750 --> 05:44.120 Well, this is actually hexadecimal code. 66 05:44.300 --> 05:54.150 And if we copy it and put it into a hexadecimal converter, we can convert it to text, and you can see 67 05:54.150 --> 05:59.700 that the text we're getting back is pretty much the beginning of the JSON that we're getting back from 68 05:59.760 --> 06:03.090 OpenWeatherMap that we saw earlier here. 69 06:03.660 --> 06:07.970 And this is just simply a different way of representing that data. 70 06:08.010 --> 06:15.030 Now what would be far more useful for us, though, is to actually get a Javascript object, and we can do 71 06:15.030 --> 06:22.860 that by converting the data into a Javascript object. And to do that we would need to write JSON. 72 06:23.040 --> 06:32.250 parse, and this will turn a JSON in some sort of string format, say the hexadecimal, or binary, or text, 73 06:32.700 --> 06:36.030 and then turn it into an actual Javascript object. 74 06:36.360 --> 06:46.230 So inside this method I'm going to pass our data, and now let's store this inside a constant called weatherData, 75 06:46.680 --> 06:57.710 and let's go ahead and console.log that. And now you can see that we're able to print an entire 76 06:57.710 --> 07:06.410 Javascript object, so there's no strings in the keys, and everything is organized as you would any other 77 07:06.410 --> 07:08.090 Javascript object. 78 07:08.090 --> 07:15.830 We've basically taken our IKEA flat pack, and we've unwrapped it, and followed the instructions to recreate 79 07:15.830 --> 07:24.230 the 3D wardrobe, or, in our case, the 3D Javascript object using JSON.parse. 80 07:24.310 --> 07:27.690 Now we can also go the other direction if we wanted to. 81 07:27.700 --> 07:34.940 Let's say that we had an object called, I don’t know, let's just call it object, and let's give it a name, 82 07:35.020 --> 07:43.770 let’s put my name in it, and then maybe, and then taking this object we can use the other method from JSON, 83 07:43.830 --> 07:48.100 which is stringify. And when we stringify an object, 84 07:48.120 --> 07:50.460 it basically does the opposite. 85 07:50.460 --> 07:57.180 It will go ahead and turn a Javascript object into a string. 86 07:57.180 --> 08:03.390 So now if I print it, you can see that it's completely flat packed like this, right, taking up the minimum 87 08:03.450 --> 08:12.060 amount of space necessary. All our keys have become strings, but keeping all of the syntax that's required 88 08:12.120 --> 08:15.630 to be able to bring it back to life later on. 89 08:15.630 --> 08:22.980 And this is effectively going the other direction, taking the 3D wardrobe and packing it down to a single 90 08:22.980 --> 08:24.750 string using that method, 91 08:24.750 --> 08:34.040 JSON.stringify. Now let me delete all of that, and I want to be able to use my weatherData to pull 92 08:34.040 --> 08:42.440 out specific pieces of information from it, like the temperature, or the description, or an icon that I 93 08:42.440 --> 08:44.240 can use to display in my web site. 94 08:44.720 --> 08:51.340 So how do I do this? How do I get this temperature specifically printed out? 95 08:51.350 --> 09:00.590 Well, because we've got basically one huge nested object, we can tap into the object, look for the main 96 09:00.680 --> 09:03.610 key, and then look for the temp key. 97 09:03.740 --> 09:06.240 So the code for that would look like this. 98 09:06.410 --> 09:10.420 Let's create a const called temp, and then let's tap into our weatherData. 99 09:10.640 --> 09:16.950 The first level that we go down is this indentation, and we get to a key called main, 100 09:16.970 --> 09:19.110 so weatherData.main. 101 09:19.400 --> 09:26.510 And then once we're inside the main object, then our value lives inside a key called temp, 102 09:26.510 --> 09:28.820 so then it's .temp. 103 09:28.820 --> 09:32.000 So now if I log my temp, 104 09:36.200 --> 09:38.350 we should be getting 5.84. 105 09:38.390 --> 09:42.710 So it's 5.84 degrees here in London at the moment. 106 09:42.830 --> 09:44.620 Now, while that wasn't very difficult, 107 09:44.660 --> 09:48.440 that also wasn't a very complex JSON. 108 09:48.440 --> 09:54.040 If we end up with a really long JSON, sometimes it might get confusing 109 09:54.050 --> 09:58.620 digging through the levels and seeing how to get to each of these values. 110 09:58.880 --> 10:00.880 Now I want to show you a neat trick. 111 10:00.890 --> 10:06.850 So earlier on I showed you that you can install the JSON Viewer Awesome as a free Chrome browser extension. 112 10:07.640 --> 10:14.010 Once you've done that, if you head over to the API that we're calling over here, 113 10:14.060 --> 10:21.350 so putting this particular URL into the browser, then we get back the same data here. 114 10:21.350 --> 10:28.280 And if we want to access a particular piece of data, all you have to do is click on it, hover over this 115 10:28.370 --> 10:31.970 icon, and then click ‘Copy path’. 116 10:32.020 --> 10:39.060 Now this path, if I paste it, is basically the way to navigate to the piece of information that you're 117 10:39.070 --> 10:41.920 interested based on the object that you have. 118 10:41.920 --> 10:44.450 So the object we've got back is weatherData. 119 10:44.470 --> 10:47.790 So we write weatherData. and then paste in the path, 120 10:47.860 --> 10:51.310 then we get hold of the temperature. 121 10:51.400 --> 10:58.260 Now if I get hold of the feels_like temperature, then I can also do exactly the same thing. It becomes main. 122 10:58.270 --> 11:06.010 feels_like. This is a really neat tool for us to be able to work with JSON, and I highly 123 11:06.010 --> 11:09.400 recommend you install it if you haven't got it already. 124 11:09.400 --> 11:18.700 Now going back to our JSON, the next piece of data I want is the description of the weather, so you can 125 11:18.700 --> 11:25.920 either use the method of looking through it and see how you can get this description, or you can use 126 11:25.930 --> 11:29.580 JSON Awesome and get the path and do what we did just now. 127 11:29.650 --> 11:38.420 But I want you to try and print out the weather description, so pause the video and give that a go. 128 11:38.440 --> 11:45.160 All right. Let’s create a new constant, and I'm going to call it weatherDescription, and it's obviously 129 11:45.160 --> 11:46.660 going to come from our weatherData 130 11:46.680 --> 11:53.710 JSON object. And then I'm just going to use the easy way, which is write a dot, and then take my description, 131 11:53.860 --> 12:00.730 copy the path, and then paste it over here. So effectively what we're doing here is we're taking this entire 132 12:00.730 --> 12:07.570 object, we're digging into the weather object using that key, and then the weather object is actually 133 12:07.600 --> 12:12.340 an array. It’s an array with only one item. 134 12:12.340 --> 12:19.810 So we get hold of that item using the 0, and then we get hold of the description by tapping into that 135 12:19.810 --> 12:20.910 key. 136 12:21.010 --> 12:30.030 And now, if we console.log this weatherDescription, then we get “overcast clouds” being printed. 137 12:30.280 --> 12:36.700 So in this lesson, we looked at how to get hold of the data from the response, and then to parse the 138 12:36.700 --> 12:43.450 JSON data that we get back into an actual Javascript object, and then we saw how we can dig through 139 12:43.450 --> 12:48.820 our Javascript object to get these specific pieces of data that we're interested in. 140 12:48.820 --> 12:55.690 Now in the next lesson, we're going to be taking these pieces of data, and using Express and Node to put 141 12:55.690 --> 13:01.930 the data into an actual HTTP web site that we can display to our user. 142 13:01.930 --> 13:05.020 So head over to the next lesson to continue building out our site.