WEBVTT 0 00:00.490 --> 00:09.240 A JSON format stands for Javascript Object Notation. And you might have noticed this as well. 1 00:09.240 --> 00:17.130 The data that we get back looks remarkably like how we create Javascript objects, where we open up a 2 00:17.130 --> 00:18.510 set of curly braces, 3 00:18.510 --> 00:27.120 we have our key, then our colon, then our value, and each of these key value pairs are then separated by 4 00:27.120 --> 00:32.600 commas, and we can embed objects inside other objects. 5 00:32.610 --> 00:35.370 Now there are a couple of differences though, 6 00:35.640 --> 00:41.970 say, for example, when we create an actual object in Javascript we always have a var or a let keyword in 7 00:41.970 --> 00:42.870 front, 8 00:42.900 --> 00:49.620 we have the name of the object without any quotation marks around it, because it's not a string, 9 00:49.920 --> 00:54.390 and inside our object, the keys are never strings, right? 10 00:54.390 --> 01:02.700 They're simply written as they are. Now the reason why we use a JSON to pass data around on the Internet 11 01:03.140 --> 01:10.560 is because it's in a format that can be readable by a human, but it can also be easily collapsed down 12 01:10.590 --> 01:13.890 to take up as little space as possible. 13 01:13.890 --> 01:21.840 So it's almost like if your Javascript object is a full sized wardrobe, but while you're transporting 14 01:21.840 --> 01:21.980 it, 15 01:21.990 --> 01:27.030 if you bought it from the store and you're taking it home, you probably don't want to move it as an entire 16 01:27.030 --> 01:28.530 wardrobe, right? 17 01:28.620 --> 01:37.050 Just like the flat pack furniture at IKEA, you can collapse all of that data down into a single string. 18 01:37.350 --> 01:42.470 And as long as we maintain where all the curly braces and the colons and the commas are, 19 01:42.900 --> 01:51.660 then at a later stage, once we received that JSON as a string, we can build it back up into the original 20 01:51.750 --> 01:52.900 object. 21 01:52.980 --> 01:58.110 Now JSON is not the only format that we can receive data from 22 01:58.110 --> 02:06.120 APIs. Very frequently you'll find that various APIs, like OpenWeatherMap, will provide multiple formats 23 02:06.240 --> 02:08.600 for you to be able to get data from them. 24 02:08.640 --> 02:15.460 So in addition to JSON, you'll often find a format called XML, which is extensible markup language, 25 02:15.510 --> 02:20.250 or it could also come back as simple HTML, hypertext markup language. 26 02:20.820 --> 02:27.720 But JSON is currently the most favoured format, because it's much lighter weight than the other two, 27 02:27.930 --> 02:34.400 and also because it's very easy to turn back into a Javascript object. 28 02:34.400 --> 02:41.820 Now if you want to prettify the output that we get in our browser, similar to how Postman does it, turn 29 02:41.850 --> 02:44.660 the raw output into a pretty version, 30 02:44.880 --> 02:49.190 you can go ahead and download a Chrome browser add on called JSON Viewer 31 02:49.200 --> 02:50.160 Awesome. 32 02:50.250 --> 02:57.990 It's, again, free to download, and you can simply add it to Chrome as an extension. Once it's been added, 33 02:58.110 --> 02:59.190 you'll see it up here. 34 02:59.610 --> 03:06.570 And now if I go back to that previous API request and I refresh it, you'll see it now gets formatted 35 03:06.900 --> 03:16.710 by JSON Viewer Awesome into a tree structure, or a chart structure, or the original JSON input. 36 03:16.770 --> 03:23.220 Another really useful thing about JSON Viewer Awesome is, when we click on the individual pieces of 37 03:23.220 --> 03:24.180 data that we want, 38 03:24.180 --> 03:30.140 say this id, or this icon, and we hover over this green button, 39 03:30.330 --> 03:38.340 we can actually either copy the value, or copy the path that it takes to get to this particular value. 40 03:38.340 --> 03:40.970 Notice how we can collapse some of these trees. 41 03:41.070 --> 03:45.220 So this icon is nested inside an array, 42 03:45.330 --> 03:48.320 inside this weather piece of data, 43 03:48.570 --> 03:52.480 and then that is inside the original 13 item 44 03:52.860 --> 03:54.390 JSON object. 45 03:54.390 --> 04:01.690 So if I go ahead and just paste what I copied just now, you can see that to get to that icon, we first tap 46 04:01.710 --> 04:10.950 into the JSON object, and then get hold of the weather object, and then get the first item, the 0 item 47 04:11.370 --> 04:12.720 inside the array, 48 04:12.720 --> 04:17.490 and finally we tap into the value of the key icon. 49 04:18.060 --> 04:24.570 So once we've turned our JSON into a JSON object, this is how we would get hold of this piece of data 50 04:24.680 --> 04:26.600 to use in our web site. 51 04:26.610 --> 04:29.390 This is what we're going to be doing in the next lesson. 52 04:29.490 --> 04:34.770 We're going to be putting into practice everything that we've learned about APIs and the JSON data 53 04:34.800 --> 04:43.110 format, in order to use the OpenWeatherMap API to create our own web site that shows the weather for 54 04:43.110 --> 04:49.660 certain cities, and also allow the user to search for the weather in certain cities. 55 04:49.680 --> 04:53.790 This is what we'll be doing in the next lesson, so hopefully I'll see you there.