1 00:00:00,060 --> 00:00:06,930 So we're going to be making a connection to the Wiki Mapei API and just using the example key, so there's 2 00:00:06,930 --> 00:00:14,070 a number of examples within the documentation that you can select where they've got the endpoints. 3 00:00:14,400 --> 00:00:20,730 And also they have some example and points and paths here that you can connect to to make the queries 4 00:00:20,730 --> 00:00:21,700 and return back data. 5 00:00:22,050 --> 00:00:25,200 So data can be returned back as JSON. 6 00:00:26,940 --> 00:00:30,780 There's quite a lot of information coming back from the GSM connection. 7 00:00:32,140 --> 00:00:36,250 And then what we're doing in this lesson is updating the input fields. 8 00:00:38,320 --> 00:00:45,160 Providing ability to search within those coordinates and then returning back the five results from those 9 00:00:45,730 --> 00:00:49,850 coordinates with the title and a link to more information. 10 00:00:50,230 --> 00:00:54,340 So if the coordinates change, the results are also going to change. 11 00:00:54,400 --> 00:00:56,470 So in this case, we're not able to find anything. 12 00:00:57,070 --> 00:00:58,150 Let's change it to three. 13 00:00:59,910 --> 00:01:05,420 So we're able to find one item at these coordinates, so that's longitude and latitude. 14 00:01:06,180 --> 00:01:11,690 So as the user updates those, it's going to update the results that are coming back from the API. 15 00:01:11,880 --> 00:01:15,530 And we did apply a little bit of styling with see us. 16 00:01:15,830 --> 00:01:19,410 So we're going to be connecting to an API at Wicky, a map here. 17 00:01:19,710 --> 00:01:22,770 And that's going to be the website where we're going to be connecting to. 18 00:01:22,770 --> 00:01:27,860 So set up the index file with each HTML opening the Tamil Tigers. 19 00:01:28,380 --> 00:01:32,820 We've got some space here for stylings of would want to apply some styling to the content that we're 20 00:01:32,820 --> 00:01:36,690 outputting and then we just have the standard HTML tags here. 21 00:01:36,700 --> 00:01:42,050 So we've got an H1 to indicate a title and then we've got also an input area. 22 00:01:42,060 --> 00:01:48,720 So if we need to input some content, we can use that element a button, a div to output the content 23 00:01:48,810 --> 00:01:50,590 and then linking to the gas. 24 00:01:50,640 --> 00:01:55,650 Well, so the JavaScript file and that's where all the magic is going to happen within the JavaScript 25 00:01:55,650 --> 00:01:55,970 file. 26 00:01:55,980 --> 00:02:03,000 I've kept some of the setup variables that we did in the last lesson where we selected the elements 27 00:02:03,000 --> 00:02:03,870 from the page. 28 00:02:04,080 --> 00:02:09,810 We updated some of the values of those elements on the page and then also add an event listener with 29 00:02:09,810 --> 00:02:10,540 the button click. 30 00:02:10,920 --> 00:02:15,450 So this is going to be a similar format where whenever the button gets clicked, then we're going to 31 00:02:15,450 --> 00:02:16,800 be connecting to the API. 32 00:02:17,100 --> 00:02:19,720 So there's a lot of useful APIs out there. 33 00:02:19,720 --> 00:02:26,910 And when you do do do a Google search, you'll also notice that there are quite a bit of various APIs 34 00:02:26,910 --> 00:02:27,880 that you can connect to. 35 00:02:28,440 --> 00:02:33,390 So one of them that we're going to be demonstrating today is going to be the Wiki mapping API. 36 00:02:33,390 --> 00:02:39,480 So if you and for this one as well, I just did want to note that in order to get a key, you do have 37 00:02:39,480 --> 00:02:40,890 to sign up with them. 38 00:02:41,400 --> 00:02:42,960 So this is an optional thing. 39 00:02:43,470 --> 00:02:47,250 If you're not interested in signing up, then you can just skip this lesson. 40 00:02:47,580 --> 00:02:53,070 And I did want to note that within this video, we are going to be using just the example key and that 41 00:02:53,070 --> 00:02:56,040 appears to be working at the time of filming this video. 42 00:02:56,190 --> 00:02:59,600 So it may or may not be working when you are looking at it. 43 00:03:00,090 --> 00:03:02,880 So this, again, is an optional lesson. 44 00:03:03,090 --> 00:03:09,150 And this is just going to be a demonstration of the various APIs out there that you should or that you 45 00:03:09,150 --> 00:03:14,820 can check out and that you do need to sign up for it and how you can make use of various websites with 46 00:03:14,820 --> 00:03:15,540 the endpoints. 47 00:03:16,230 --> 00:03:24,110 So going over to the Whicker Mapping API, they've got information about how to connect to the API. 48 00:03:24,450 --> 00:03:27,650 So I did set up a key already, sort of generated a key. 49 00:03:28,110 --> 00:03:30,420 So I'm ready to start using the API. 50 00:03:30,690 --> 00:03:32,960 They've got the required parameters here. 51 00:03:33,090 --> 00:03:36,360 So there's always going to be an endpoint that we're connecting to. 52 00:03:36,600 --> 00:03:42,740 And in this case, it does require a key within the base URL and that's the one that we're generating. 53 00:03:43,020 --> 00:03:49,750 And then we just add in the key value here and then the object that we want to get information about. 54 00:03:50,220 --> 00:03:54,770 So all of this and they've got an example here of how to connect. 55 00:03:54,900 --> 00:04:01,140 So we'll do the first or we'll just do the example and select this endpoint. 56 00:04:01,830 --> 00:04:06,930 So let's go back into the coding area and copy the euro. 57 00:04:08,310 --> 00:04:11,180 And I'm going to add that in as a variable name for it. 58 00:04:11,190 --> 00:04:14,850 You URL and then we'll manipulate it afterwards. 59 00:04:15,360 --> 00:04:20,490 So right now it does have example key in there and a toggle the word wrap. 60 00:04:21,120 --> 00:04:25,350 So let's just go back into the JavaScript and refresh. 61 00:04:25,500 --> 00:04:27,800 And when we click the button, nothing's happening. 62 00:04:27,810 --> 00:04:34,560 And this is where we can make our load so that our futch request to the euro and then we've got the 63 00:04:34,560 --> 00:04:35,340 promises. 64 00:04:39,360 --> 00:04:42,420 And returning back the JSON object. 65 00:04:44,540 --> 00:04:51,860 And taking that Jason and returning it back as Jason and actually I won't call this Jason, I'm going 66 00:04:51,860 --> 00:04:54,290 to just call it the response object. 67 00:04:54,650 --> 00:05:02,930 So the response that comes back and then sending it back as Jason and then when we get the data back, 68 00:05:04,220 --> 00:05:09,230 we're going to take the data and put it into the console and we'll try this out. 69 00:05:09,410 --> 00:05:13,670 And we don't necessarily know if the endpoint is receiving back, Jason. 70 00:05:13,820 --> 00:05:16,160 And remember, we are using the example key. 71 00:05:16,210 --> 00:05:17,900 So let's see what happens. 72 00:05:17,900 --> 00:05:20,730 And we can also add in the catch as well. 73 00:05:21,020 --> 00:05:30,290 So if there are any issues, then we can catch the error and let's output the error message into the 74 00:05:30,290 --> 00:05:31,360 console as well. 75 00:05:33,020 --> 00:05:39,650 So run the code and we get this interesting message that we haven't seen before where we get unexpected 76 00:05:39,650 --> 00:05:41,810 token and then less insight. 77 00:05:41,810 --> 00:05:43,950 And Jason at position zero. 78 00:05:44,240 --> 00:05:49,700 So generally what this means is that this isn't properly structured, Jason, data. 79 00:05:49,880 --> 00:05:53,900 So we're trying to force it into JSON as we were expecting, Jason. 80 00:05:54,210 --> 00:05:56,950 But in this case, it's not going to be structured. 81 00:05:56,960 --> 00:05:57,830 Jason, data. 82 00:05:58,070 --> 00:05:59,410 So let's see what happened. 83 00:05:59,420 --> 00:06:04,040 And now when I just return it back as text, this is what we get back. 84 00:06:04,850 --> 00:06:08,580 We get an XML return value. 85 00:06:08,840 --> 00:06:13,870 So this is XML object with a bunch of text on the page. 86 00:06:14,210 --> 00:06:22,910 So how about we take this content and we output it into the output area so we take output in our HTML 87 00:06:24,140 --> 00:06:27,390 and we'll equal this to whatever the contents of data is. 88 00:06:28,040 --> 00:06:30,450 So let's see what gets returned back here. 89 00:06:31,220 --> 00:06:35,120 So it looks like we got quite a bit of information being returned back here. 90 00:06:35,270 --> 00:06:43,360 And again, this isn't structured JSON data, so we need to check in to see if we can force the format 91 00:06:43,580 --> 00:06:48,980 so there is an option to force the format to be JSON format, and that's the one that we're after. 92 00:06:49,130 --> 00:06:51,720 And all of these APIs are going to be different. 93 00:06:52,040 --> 00:06:56,240 So keep in mind that they're going to have different documentation. 94 00:06:56,360 --> 00:07:02,780 And usually the first place to start is to go to the documentation just to see what type of documentation 95 00:07:02,930 --> 00:07:06,620 and how you can do the response value. 96 00:07:07,040 --> 00:07:14,150 So in this case, they do have an option here for format equals and then let's set that format as JSON. 97 00:07:14,810 --> 00:07:21,020 So we'll add and then format it as Jason and we'll see what then gets returned back. 98 00:07:22,400 --> 00:07:27,470 So this is a JSON formatted structure that just got returned back. 99 00:07:27,590 --> 00:07:33,400 And now because it is, Jason, this going to be a whole lot easier for us to read and to deal with. 100 00:07:34,190 --> 00:07:36,920 So let's also put it into the console. 101 00:07:38,150 --> 00:07:44,300 And then what we'll do, instead of outputting the data, we're going to pass it and stratify it and 102 00:07:44,330 --> 00:07:49,970 output the data that way, because now that it's going to be a JSON data, it's going to be a JavaScript 103 00:07:49,970 --> 00:07:51,650 object and then we can pass through it. 104 00:07:51,890 --> 00:08:00,950 So using JSON String Afie that string, if I had the data that were outputting into output, so try 105 00:08:00,950 --> 00:08:11,210 that another time and at this point you can use the console to output the JavaScript content. 106 00:08:12,220 --> 00:08:13,210 As an object. 107 00:08:17,660 --> 00:08:26,360 And it's returning back the content of Idy fifty five, so what if we want to search and we don't want 108 00:08:26,360 --> 00:08:30,020 to get it by it, but we want to search the content. 109 00:08:31,700 --> 00:08:33,620 So let's go back into the API. 110 00:08:35,330 --> 00:08:44,050 So you can get their place by area, you can get the place by it, you can get the nearest place so 111 00:08:44,090 --> 00:08:45,740 to latitude and longitude. 112 00:08:47,380 --> 00:08:54,850 And there's also a police search, so in this format, we can do a function, police search, so let's 113 00:08:54,850 --> 00:09:00,280 update the string and function and we're going to do a police search. 114 00:09:01,630 --> 00:09:04,510 So make sure that we're writing it out properly. 115 00:09:04,780 --> 00:09:10,270 And this case, we're not going to need an I.D., but we are going to need a query for what we're searching 116 00:09:10,270 --> 00:09:10,570 for. 117 00:09:12,720 --> 00:09:15,120 So let's search for the word tower. 118 00:09:17,780 --> 00:09:24,680 And these are the required parameters in this documentation, so we can search for the police, search 119 00:09:24,680 --> 00:09:31,350 with the required parameters and let's load that and see what we get back. 120 00:09:32,120 --> 00:09:33,980 So invalid coordinates. 121 00:09:34,970 --> 00:09:41,150 So let's try another end point and we'll try the one here where we've got the example of places get 122 00:09:41,150 --> 00:09:41,790 nearest. 123 00:09:41,810 --> 00:09:47,570 So it's going to return back the nearest places to this latitude and longitude, and then we'll create 124 00:09:47,570 --> 00:09:50,180 an input where we can update the latitude and longitude. 125 00:09:50,450 --> 00:09:53,840 So it's going to return back places to the nearest latitude longitude. 126 00:09:54,050 --> 00:09:58,700 Make sure you keep the format, Jason, so that we return the data back within adjacent format. 127 00:09:58,880 --> 00:10:00,020 And now let's try it. 128 00:10:02,650 --> 00:10:08,860 And that was copy and paste issue there, so let's again refresh that and try that. 129 00:10:10,530 --> 00:10:18,450 So it is returning back the five places that are nearest and then this is the places array that we could 130 00:10:18,450 --> 00:10:19,980 loop through and output the content. 131 00:10:20,250 --> 00:10:22,830 So let's make a few updates to the page. 132 00:10:25,420 --> 00:10:33,220 We're beside the input, so the first input can be the latitude and you can change these with the various 133 00:10:33,220 --> 00:10:37,390 parameters, so there's the latitude and longitude and those are the parameters that are changing. 134 00:10:37,750 --> 00:10:40,420 And it looks like we're still working off of the example keys. 135 00:10:40,420 --> 00:10:45,550 So you could continue as you practice to work on, for example, key if it is working. 136 00:10:45,550 --> 00:10:51,010 And if not, then you might have to sign up for a key in order to be able to access the API. 137 00:10:55,330 --> 00:10:57,070 So creating another input. 138 00:11:00,500 --> 00:11:05,750 And we'll do this with JavaScript Saval, too, and using the documents. 139 00:11:07,140 --> 00:11:15,690 And that's going to be to create elements, sort of creating a separate input and this input vowel to 140 00:11:16,440 --> 00:11:23,370 is going to be let's set an attribute and the type is going to be. 141 00:11:24,640 --> 00:11:25,210 Text. 142 00:11:29,010 --> 00:11:31,920 And then the input vowel to. 143 00:11:33,300 --> 00:11:39,960 Value and we're just going to accept these as the default latitudes and longitudes, so the first one 144 00:11:39,960 --> 00:11:45,210 will have this as the default and this one will have this as the default latitude. 145 00:11:49,360 --> 00:11:55,730 So this one is going to be longitude and this one is going to be the latitude. 146 00:11:55,750 --> 00:12:00,160 So now we're going to have to input fields and let's add that to that page. 147 00:12:05,770 --> 00:12:11,860 So adding it in and we'll use the document body, so just append it to the body. 148 00:12:18,370 --> 00:12:20,380 And add the input file to. 149 00:12:23,200 --> 00:12:26,440 And sort of appends let's do a prepend. 150 00:12:31,230 --> 00:12:34,470 And what also we can do is select the one. 151 00:12:37,840 --> 00:12:39,100 And will hide the H1. 152 00:12:49,250 --> 00:12:56,270 Or we can prepend it, so that will shift it up above that, the inputs there. 153 00:12:57,020 --> 00:12:59,420 So I will just move it around on the page. 154 00:12:59,600 --> 00:13:04,850 So that way we've got first we've got the longitude and then we've got the latitude and we've got the 155 00:13:04,850 --> 00:13:05,840 option to load. 156 00:13:08,280 --> 00:13:09,330 Search, Bob. 157 00:13:21,030 --> 00:13:28,050 So the search map, longitude, latitude, so now we're able to update these parameters to get the nearest 158 00:13:28,950 --> 00:13:32,730 and we need to have these dynamically updated. 159 00:13:33,390 --> 00:13:36,540 So let's within the Futch request. 160 00:13:39,050 --> 00:13:47,360 We'll create a temporary URL and that you URL is going to attend to the existing one with these parameters 161 00:13:48,950 --> 00:13:52,080 and a lot of times in the query string, it doesn't matter what order. 162 00:13:52,130 --> 00:13:55,790 So we're going to just shift the order around here. 163 00:13:56,690 --> 00:14:03,120 So we're going to have the euro and then concatenate to the URL, the latitude and longitude. 164 00:14:03,140 --> 00:14:04,460 And now these numbers. 165 00:14:06,400 --> 00:14:08,920 I use the template, literals the tactics. 166 00:14:12,140 --> 00:14:18,770 And use the euro route and concatenate and. 167 00:14:22,360 --> 00:14:28,780 So we want to pick up the latitude and longitude numbers, so for longitude, we're going to get the 168 00:14:28,780 --> 00:14:38,380 input value value of whatever it currently is and for latitude where we're going to get the input value 169 00:14:38,380 --> 00:14:39,730 of the first input field. 170 00:14:40,540 --> 00:14:48,640 So whatever that current value is, and that way we can use those to create our Web URL. 171 00:14:51,710 --> 00:14:55,280 And then just update the string variable. 172 00:14:58,380 --> 00:15:05,190 And also, good idea to lock it out into the console so that you can see the you are what it looks like. 173 00:15:06,000 --> 00:15:09,990 So that's the world that we're running and it looks like. 174 00:15:10,440 --> 00:15:12,710 And the reason is that we're still using the euro. 175 00:15:12,720 --> 00:15:18,120 So it's not getting a proper structure because we're still we're not updating and we're not trying to 176 00:15:18,120 --> 00:15:19,750 connect to the temporary URL. 177 00:15:21,480 --> 00:15:27,090 That's why I always put it out into the console, because that way, if I want to check and make sure 178 00:15:27,090 --> 00:15:35,550 that I've got a working Web URL, I can simply click the euro out into the console and see if that's 179 00:15:35,550 --> 00:15:36,500 going to be opening up. 180 00:15:36,510 --> 00:15:37,500 So copy the link. 181 00:15:39,590 --> 00:15:42,960 And paste it into the console and just see what's getting returned back. 182 00:15:42,980 --> 00:15:44,870 So this look like it's proper, Jason. 183 00:15:46,780 --> 00:15:50,350 And it's properly taking and returning the content back. 184 00:15:51,310 --> 00:15:57,790 Let's see if we update this, if that changes and I'm not sure but coordinates. 185 00:16:00,860 --> 00:16:04,520 And it looks like at these coordinates, we're not actually finding anything. 186 00:16:09,840 --> 00:16:16,650 So a little bit of trial and error here, and if we go back to where that original location was. 187 00:16:18,180 --> 00:16:19,500 I can see that it's changed. 188 00:16:25,040 --> 00:16:31,520 So now we can output some of this content and iterate through it and put it on the page now that we're 189 00:16:31,520 --> 00:16:33,340 getting the data coming in. 190 00:16:33,890 --> 00:16:35,260 So let's do that as well. 191 00:16:37,730 --> 00:16:39,190 And I'll just call it maker. 192 00:16:39,590 --> 00:16:44,350 And then from here is where we can iterate through and we can loop through the data object. 193 00:16:44,510 --> 00:16:51,320 So mainly just the places that we're going to be iterating through and then outputting that within HTML. 194 00:16:54,160 --> 00:16:56,290 And looping through Satake data. 195 00:16:59,100 --> 00:17:06,810 And go for each one of the items within the data, we're selecting the elements and let's log it out 196 00:17:06,810 --> 00:17:07,890 into the console. 197 00:17:11,570 --> 00:17:13,580 And just run this function here. 198 00:17:16,520 --> 00:17:22,670 So we'll see what we're returning back and we're not able to loop through because we're trying to loop 199 00:17:22,670 --> 00:17:27,290 through the full data object and we want to loop through the data places. 200 00:17:27,290 --> 00:17:31,690 So we have an option here where if we want, we can just send over the data places. 201 00:17:32,000 --> 00:17:37,040 So make sure that it's always there that you're trying to loop through and again, use the console as 202 00:17:37,040 --> 00:17:37,390 needed. 203 00:17:37,820 --> 00:17:43,220 So it looks like we've got a number of items here that we can output so we can do a title. 204 00:17:44,060 --> 00:17:44,630 You, Earl. 205 00:17:45,050 --> 00:17:47,150 There's also the polygon as well. 206 00:17:53,350 --> 00:17:57,560 And let's see what type of content we can use. 207 00:17:58,870 --> 00:18:01,630 So this is going back to the search that wasn't working. 208 00:18:02,080 --> 00:18:08,580 So in this case, it does require the query as well as the latitude and longitude for the search parameters. 209 00:18:09,460 --> 00:18:18,070 And if you go to examples on the wiki map here, you can select and let's search by. 210 00:18:19,450 --> 00:18:22,360 The coordinates get nearest. 211 00:18:23,570 --> 00:18:28,370 And those are the default coordinates, so send a request. 212 00:18:30,460 --> 00:18:32,630 And we want to talk about it with Jason. 213 00:18:33,340 --> 00:18:37,300 And for this, you do need to have a key that you've added. 214 00:18:37,310 --> 00:18:42,100 So this is just for demonstration purposes where you can connect to the API examples. 215 00:18:42,250 --> 00:18:47,190 And a lot of them will have these examples and points that you can check out and see the results that 216 00:18:47,200 --> 00:18:51,370 you returning back your EPIK to try it out within their trial. 217 00:18:51,550 --> 00:18:59,050 So let's go back to the documentation and then using the data that we see within the console, let's 218 00:18:59,060 --> 00:19:00,460 output some of this content. 219 00:19:01,360 --> 00:19:02,710 So we do have a title. 220 00:19:03,820 --> 00:19:10,660 So create some elements and using the documents, eight elements. 221 00:19:13,160 --> 00:19:18,740 Create a diff and this is going to be the title, so the text content of title. 222 00:19:20,860 --> 00:19:25,930 It's going to be equal to the elements and again, referring to the object for the property name so 223 00:19:25,930 --> 00:19:28,030 I can use dot notation in this case. 224 00:19:29,840 --> 00:19:34,310 And then Output's append title. 225 00:19:36,970 --> 00:19:41,890 So there's all the titles being output, we can also have a hyperlink. 226 00:19:44,880 --> 00:19:51,270 So instead of doing a title, I just create a div container just to save a little bit of time. 227 00:19:51,510 --> 00:19:56,910 So this is just optional how you want to approach this and how you want to output the content. 228 00:19:57,870 --> 00:20:03,510 So in this case, if I do that in our HTML, we can add all of the structure within the entire HTML. 229 00:20:07,720 --> 00:20:10,750 And that's going to save us some JavaScript for creating the elements. 230 00:20:15,430 --> 00:20:17,560 And wrap it in a dif. 231 00:20:18,710 --> 00:20:23,060 So let's comment about the inner turmoil that we're putting here. 232 00:20:24,800 --> 00:20:31,520 And I'll just consider the Jason results, so that way we're only seeing the actual results that we 233 00:20:31,520 --> 00:20:34,550 want to look at, we can link to. 234 00:20:35,840 --> 00:20:44,030 You, Earl tml, so it saves us some time on putting some of the content because we can just simply 235 00:20:44,030 --> 00:20:44,690 put up with it. 236 00:20:44,720 --> 00:20:46,650 There you are, all e-mail. 237 00:20:47,690 --> 00:20:50,930 So it's going to add your URL HTML for us. 238 00:20:51,470 --> 00:20:54,790 So it already structured the HTML for us, saved us a little bit of time there. 239 00:20:56,520 --> 00:21:00,420 And from here, you can update and add content as needed. 240 00:21:03,970 --> 00:21:04,870 And that one. 241 00:21:07,590 --> 00:21:15,270 You get rid of the paragraph and I'll just separate it as as an H.R., so you've got separation. 242 00:21:16,660 --> 00:21:20,500 And we can click the links to find out more information about that particular object. 243 00:21:23,220 --> 00:21:24,750 And let's add some styling. 244 00:21:28,630 --> 00:21:29,410 So border. 245 00:21:34,740 --> 00:21:36,270 And round it slightly. 246 00:21:40,310 --> 00:21:41,990 And with some party. 247 00:21:45,600 --> 00:21:51,440 And center, it's the with of 80 percent for it. 248 00:21:53,640 --> 00:21:56,130 And let's add a hover option to it. 249 00:21:59,600 --> 00:22:01,100 And the obesity. 250 00:22:05,830 --> 00:22:09,130 And for d'Hiv, using class list. 251 00:22:10,450 --> 00:22:14,590 Add and add the class of box to the elements. 252 00:22:16,480 --> 00:22:24,580 So it's a little bit more structure to the elements on the page, and we don't need to h rough H.R. 253 00:22:24,700 --> 00:22:28,270 a horizontal rule and also let's do a margin at the bottom. 254 00:22:30,390 --> 00:22:33,180 So do top and bottom of 10 pics for Marjan. 255 00:22:35,910 --> 00:22:42,630 So it gives us the ability to connect output some useful information from another Web API. 256 00:22:45,040 --> 00:22:46,810 With a different data structure. 257 00:22:48,340 --> 00:22:53,680 The task for this lesson is to find a web endpoint so you can use the same word that I use the wiki 258 00:22:53,680 --> 00:23:00,160 Mapei dot org and connect to the API and retrieve the data as JSON data. 259 00:23:00,160 --> 00:23:06,970 So a lot of them might have an example and look for ones that have a format in JSON, review the data 260 00:23:06,970 --> 00:23:09,770 and create JavaScript object from the data. 261 00:23:10,120 --> 00:23:16,570 So if it is Jason formatted, then you can within the first request you can structured as JSON object 262 00:23:16,750 --> 00:23:20,320 or JavaScript object and then use the data on your Web page. 263 00:23:20,440 --> 00:23:27,460 And then lastly, create a way for the user to update the results dynamically from your webpage making 264 00:23:27,460 --> 00:23:32,320 queries to the API so that you're getting dynamic results being returned back to the user.