1 00:00:01,140 --> 00:00:06,540 So this lesson we're going to be making a connection to a simple end point, and that end point is just 2 00:00:06,540 --> 00:00:06,970 over here. 3 00:00:06,990 --> 00:00:09,150 So this is just a regular JSON file. 4 00:00:09,360 --> 00:00:14,280 And taking a look at it, you can see that it's an array and it's got a bunch of objects that are, 5 00:00:14,280 --> 00:00:16,150 comma, separated within the array. 6 00:00:16,410 --> 00:00:22,200 So we want to iterate through the contents of the array and output, the name, the location and the 7 00:00:22,230 --> 00:00:23,670 age on the page. 8 00:00:23,670 --> 00:00:25,120 One of the button is clicked. 9 00:00:25,500 --> 00:00:32,070 So this is just outputting content from that web end point and outputting it to our webpage whenever 10 00:00:32,070 --> 00:00:32,870 we click the button. 11 00:00:33,120 --> 00:00:38,280 So it makes the request to the JSON data and then uses it within the JavaScript. 12 00:00:40,800 --> 00:00:47,970 Go ahead, open up the Ed, I've created a basic HTML shell, so we've got our HTML tags opening closing 13 00:00:47,970 --> 00:00:53,280 had we're going to do the styling within the page if we do add some styling and we've got some elements 14 00:00:53,280 --> 00:00:53,850 for the page. 15 00:00:53,860 --> 00:00:59,780 So in each one, an input area, a button so that we can add event listeners and output elements. 16 00:00:59,790 --> 00:01:04,700 So just a div with output and we're also linking to our OP1 J.S. file. 17 00:01:04,920 --> 00:01:07,050 So we're ready to start coding this project. 18 00:01:07,200 --> 00:01:08,910 So go ahead and open up the app. 19 00:01:08,910 --> 00:01:09,920 One guess. 20 00:01:10,170 --> 00:01:15,130 And in this case we are going to be connecting to a very simple JSON and then outputting the data. 21 00:01:15,130 --> 00:01:16,860 So it's going to be a list of people. 22 00:01:17,100 --> 00:01:21,900 They're going to have locations, ages and some basic information about the people. 23 00:01:22,590 --> 00:01:26,250 So you can also recreate the adjacent file as well. 24 00:01:26,260 --> 00:01:29,230 So just see that and create a brand new JSON file. 25 00:01:29,730 --> 00:01:34,800 So if you're not able to connect to the API for whatever reason or if you're just working locally with 26 00:01:34,800 --> 00:01:41,070 no Internet connection, then you can go ahead and create a local version of the JSON file. 27 00:01:41,310 --> 00:01:47,130 So JSON file itself is going to be an array and the actual location of the JSON file. 28 00:01:47,130 --> 00:01:51,870 We can take a look at it on the Web and this is going to be located are going to share this address. 29 00:01:52,110 --> 00:01:59,520 So the Web URL is Discovery VIPR dot com for its I share it for its test one JSON and it's producing 30 00:01:59,520 --> 00:02:03,420 some test data and the basic structure of the data. 31 00:02:03,420 --> 00:02:04,710 So it's always a good idea. 32 00:02:04,950 --> 00:02:10,530 Before you try to output the data or work with the data, take a look at the data structure and see 33 00:02:10,530 --> 00:02:15,150 what information so you can tell right away that this is going to be an array and it's going to have 34 00:02:15,150 --> 00:02:17,230 a number of objects within the array. 35 00:02:17,400 --> 00:02:28,860 You can also use the JSON lint website to copy and paste the JSON data so that it's more readable and 36 00:02:28,860 --> 00:02:30,570 also make sure that it is valid. 37 00:02:30,570 --> 00:02:37,470 JSON data and also within the JSON Lent, you can open and close the various objects that are in the 38 00:02:37,470 --> 00:02:37,870 array. 39 00:02:38,100 --> 00:02:42,990 So again, making it a lot easier to read as you're going to need this information when you connect 40 00:02:42,990 --> 00:02:44,120 to the Web API. 41 00:02:44,460 --> 00:02:51,810 So select the endpoint and let's create a variable and that actually should be in the JavaScript file, 42 00:02:51,810 --> 00:02:53,010 not in an adjacent file. 43 00:02:53,700 --> 00:03:04,020 So let's collect to the endpoint and just give it an object, a variable name of you, a toggle, the 44 00:03:04,020 --> 00:03:06,480 Wardrop, so you can see the full Web URL. 45 00:03:06,840 --> 00:03:13,230 And also what I'm going to do is I'm going to copy and paste JSON data into people JSON and save that 46 00:03:13,230 --> 00:03:21,000 so that we actually have two ways to get to the file and maybe we'll have one called local U URL and 47 00:03:21,000 --> 00:03:24,090 that's going to link over to people JSON Dotcom. 48 00:03:24,810 --> 00:03:28,740 So next up, we want to create some interactions on the button. 49 00:03:28,920 --> 00:03:37,350 So whenever the button gets clicked, then we're going to search the Web API or the JSON file and then 50 00:03:37,620 --> 00:03:39,660 so that we can initiate returning the data. 51 00:03:40,080 --> 00:03:43,470 So we need to select the button object from the page. 52 00:03:43,830 --> 00:03:47,720 And you can do that by selecting the button and element with a class of button. 53 00:03:48,000 --> 00:03:49,320 So using the document. 54 00:03:51,010 --> 00:03:57,720 And query selector, select the element with the class of BTN and we're going to make that clickable 55 00:03:57,730 --> 00:04:04,060 and then also we want to have an area within that HTML that we can output some content into. 56 00:04:04,390 --> 00:04:06,790 So it's going to be the element with a class of output. 57 00:04:07,810 --> 00:04:14,920 And let's add the event listener to the button so that when it gets clicked, we invoke the event and 58 00:04:14,920 --> 00:04:15,610 this event. 59 00:04:15,760 --> 00:04:24,540 What it's going to do is it's going to make the Thach request to the euro and load the data into output. 60 00:04:25,600 --> 00:04:32,660 So making the Futch request to the euro and we'll also try it with the local JSON file. 61 00:04:33,100 --> 00:04:39,850 So returning back the promise for the response object and returning back the response content, and 62 00:04:39,880 --> 00:04:45,430 this is coming back as JSON object and sometimes you see it within the endpoints. 63 00:04:45,920 --> 00:04:50,890 If you do open them up within the Web browser, if it's all just one line of code that's being returned 64 00:04:50,890 --> 00:04:52,810 back generally as a text file. 65 00:04:53,320 --> 00:04:56,170 So in that case, then you need to get it as text. 66 00:04:56,260 --> 00:05:02,230 You're not going to be able to translate it directly as a JavaScript object and you could pass through 67 00:05:02,530 --> 00:05:06,700 that string value and output it as a JavaScript object. 68 00:05:06,700 --> 00:05:09,350 And that, of course, makes it usable within your code. 69 00:05:09,790 --> 00:05:16,990 So then we've got our JSON data that's being returned and for now we're going to output it into the 70 00:05:16,990 --> 00:05:17,540 console. 71 00:05:18,730 --> 00:05:23,830 So just to make sure that everything the request was being made properly. 72 00:05:23,830 --> 00:05:27,760 So click the button and we're getting back undefined. 73 00:05:28,540 --> 00:05:30,570 So let's try the local euro. 74 00:05:31,780 --> 00:05:34,120 And again, we are getting back undefined. 75 00:05:34,540 --> 00:05:36,640 So can you spot what the issue is? 76 00:05:37,150 --> 00:05:46,570 Let's try adding in catch and see if we can select and grab the error and then console log the error 77 00:05:46,570 --> 00:05:47,170 details. 78 00:05:47,860 --> 00:05:52,620 And with catch, this is only going to work whenever there's a problem with the Web URL. 79 00:05:53,260 --> 00:05:59,170 So if you're still seeing the undefined, that means that this value for JSON, this is just coming 80 00:05:59,170 --> 00:06:00,220 back as undefined. 81 00:06:00,220 --> 00:06:02,080 There's no value that's being returned back here. 82 00:06:02,410 --> 00:06:04,510 So let's look at within our fetch request. 83 00:06:04,750 --> 00:06:07,030 And it's not having a problem connecting to the local U. 84 00:06:07,030 --> 00:06:08,960 URL or to the Web URL. 85 00:06:09,220 --> 00:06:12,850 So the next step is to debug it and take a look at this error message. 86 00:06:12,850 --> 00:06:17,110 And we do still have undefined it just has an undefined value for JSON. 87 00:06:17,110 --> 00:06:23,680 So we haven't set a value for JSON and we're getting this value for JSON is whatever is being returned 88 00:06:23,680 --> 00:06:26,590 back from the initial promise when we're making the request. 89 00:06:26,890 --> 00:06:32,070 And the problem here is within this code is that I added in the curly brackets. 90 00:06:32,440 --> 00:06:40,780 So by default, if we just do it this way, within one line, we are able to make the request. 91 00:06:41,890 --> 00:06:49,890 And also if I add in the curly brackets back in to the function, it's actually not going to work now. 92 00:06:50,530 --> 00:06:53,320 And the reason is that that initial. 93 00:06:54,910 --> 00:07:04,030 Promise makes a return of the content, so it was a syntax error that I had removed out the curly brackets 94 00:07:04,210 --> 00:07:08,760 and that removed out the return of the JSON data. 95 00:07:09,070 --> 00:07:15,040 And that's why within the JSON variable, we were returning back undefined because there is nothing 96 00:07:15,040 --> 00:07:15,340 there. 97 00:07:15,580 --> 00:07:20,690 So now when we fix that and we add in the return, we can see that we have access to the data. 98 00:07:21,010 --> 00:07:23,140 So that was a little bit of quick troubleshooting. 99 00:07:23,140 --> 00:07:29,170 And with making these fetch requests, you can encounter any number of errors or issues. 100 00:07:29,800 --> 00:07:33,790 So this is something to keep in mind when you are having problems with the web. 101 00:07:33,790 --> 00:07:37,780 You URL usually with the catch, you're able to catch it. 102 00:07:37,810 --> 00:07:44,620 So if I was to do something where I've got the Web URL and let's say this Web URL doesn't actually work, 103 00:07:44,920 --> 00:07:48,730 that's what we're going to get the cash and be able to catch any of the errors. 104 00:07:48,910 --> 00:07:53,220 And then we also get, of course, the error message that it's not able to find the Web URL. 105 00:07:55,450 --> 00:08:00,640 So do you get information about the connection if there is trouble making the connection with the Thach 106 00:08:00,640 --> 00:08:06,670 request within the cache, but if it's an error within their own variables that you have within the 107 00:08:06,670 --> 00:08:10,720 promises, you're not going to see no such error because there wasn't an error. 108 00:08:10,840 --> 00:08:14,050 It was just that the value for JSON was just undefined. 109 00:08:14,060 --> 00:08:16,050 There was no value that was being returned back. 110 00:08:16,930 --> 00:08:23,530 So now that we're able to return content into the console, that means that we can also go through and 111 00:08:23,530 --> 00:08:26,290 loop through the content and output it on the page. 112 00:08:28,730 --> 00:08:34,280 So let's create a new function, we'll call it maker, it's going to require a data array to be passed 113 00:08:34,280 --> 00:08:40,600 and and once that data array gets passed and then we're going to loop through the data object. 114 00:08:41,450 --> 00:08:49,130 So use for each to loop through each one of the items within the array and then return it back as an 115 00:08:49,130 --> 00:08:51,860 element within the for each method. 116 00:08:52,040 --> 00:08:58,550 And so for now, what we can do is will console log out the elements and I'll just shorten it to L so 117 00:08:58,550 --> 00:08:59,750 try that one more time. 118 00:08:59,780 --> 00:09:03,260 So now we've got the name and all of the information. 119 00:09:03,470 --> 00:09:08,390 And then again, it is really important that each one of the items within the array has the same content 120 00:09:08,390 --> 00:09:08,930 structure. 121 00:09:09,080 --> 00:09:11,500 Otherwise you're going to run into problems with the output. 122 00:09:12,260 --> 00:09:15,190 So let's clear the output. 123 00:09:16,250 --> 00:09:18,770 So set the inner HTML of output. 124 00:09:21,680 --> 00:09:29,180 And just call it JSON data or whatever, we're just really clearing out the entire HTML, so we're reassigning 125 00:09:29,180 --> 00:09:33,670 a value to the entire HTML and which will effectively clear out any existing data. 126 00:09:34,100 --> 00:09:42,460 And so that means that as we loop through, we can update the entire HTML that exists within that element. 127 00:09:42,650 --> 00:09:46,280 And I'm using the back text and we'll loop through each one of them. 128 00:09:46,520 --> 00:09:54,800 And for now, while Jason string of file the contents of L, so do a click on it so it returns back 129 00:09:54,800 --> 00:10:01,930 to the JSON data within a string of IDE format and we can also be more specific with the content here. 130 00:10:02,210 --> 00:10:10,220 So I just commented that part and we want to get the first name, the last name of the person within 131 00:10:10,220 --> 00:10:10,650 the array. 132 00:10:11,180 --> 00:10:20,510 So using the URL and we have to go into the name object and from there the property names are first 133 00:10:20,510 --> 00:10:23,220 and last and we can return them accordingly. 134 00:10:23,510 --> 00:10:29,580 So let's just use the dot notation for first name and then add to it last name. 135 00:10:30,230 --> 00:10:33,950 And so now that should output the first name and the last name on the page. 136 00:10:34,670 --> 00:10:43,120 Let's wrap it within a div so it gets on a new line for each one and try that one more time. 137 00:10:43,310 --> 00:10:48,410 So we're outputting the data and we can add in location as well. 138 00:10:49,070 --> 00:10:55,310 So let's create a new line of code that's going to then also add to the location. 139 00:10:57,090 --> 00:11:05,340 And whatever the city is, and then also location country, and let's output that information to the 140 00:11:05,340 --> 00:11:14,040 page, so that will be just a new line up and it looks like there was an error there that was just a 141 00:11:14,040 --> 00:11:14,950 spelling mistake. 142 00:11:15,270 --> 00:11:22,950 So it put the URL instead of the T. So let's try that one more time and use the console debugger to 143 00:11:22,950 --> 00:11:24,790 debug any issues you might have. 144 00:11:25,410 --> 00:11:31,370 So we've got the location and let's output one more and we're going to add the age to the list. 145 00:11:32,310 --> 00:11:34,210 So and then this is just on the route. 146 00:11:34,230 --> 00:11:36,090 So this one's a really easy one to add. 147 00:11:37,350 --> 00:11:44,670 And just to separate, all of the people will add in and each horizontal rule. 148 00:11:45,240 --> 00:11:52,650 So that outputs the people the list of the people to the page and connected to the JSON object. 149 00:11:53,100 --> 00:11:56,490 And then as well, we can also select the other elements. 150 00:11:56,510 --> 00:12:02,190 So let's go ahead and hide the input so const 151 00:12:04,920 --> 00:12:06,690 and using the documents. 152 00:12:07,200 --> 00:12:15,090 So make it look nice and select those elements and we'll update the style properties of it and update 153 00:12:15,090 --> 00:12:15,660 display. 154 00:12:18,990 --> 00:12:22,780 So that will remove out and that actually should be style. 155 00:12:23,430 --> 00:12:25,950 And let's also update the button text. 156 00:12:26,250 --> 00:12:28,560 So text content of the button. 157 00:12:31,740 --> 00:12:33,330 So load Jason data. 158 00:12:33,810 --> 00:12:34,330 So there we go. 159 00:12:34,360 --> 00:12:41,550 So we're outputting the content to the page coming from currently from the Web you URL, and then you 160 00:12:41,550 --> 00:12:50,130 can also swap this to the local you URL as well and within the catch so you can make a second request 161 00:12:50,430 --> 00:12:56,580 that is going to update the Web you URL so we can create a function. 162 00:12:58,700 --> 00:13:03,770 And we'll just call this getData and I'll have your URL. 163 00:13:06,510 --> 00:13:14,100 So call this your URL path and we'll make the Futch request to the Eurail path, and that way we can 164 00:13:14,100 --> 00:13:18,990 simplify this function where first we'll try the Web, you URL. 165 00:13:19,320 --> 00:13:28,260 And if we do encounter any errors or issues to it, then we can run the get data with the local URL. 166 00:13:28,530 --> 00:13:31,710 So that way, either way, we're going to load some data. 167 00:13:33,870 --> 00:13:41,480 And we should also add in failsafe and we'll just have the attempt counter, and I say this to false, 168 00:13:42,540 --> 00:13:46,620 so before we try it, so we'll only have the one attempt at the local. 169 00:13:48,010 --> 00:13:56,320 And so let's set it to true and within here, we'll have the condition that if there is no attempt to 170 00:13:56,410 --> 00:14:02,380 counter if it's false, then that's what we're going to make the request to the local data and then 171 00:14:02,380 --> 00:14:03,520 we're setting the value to. 172 00:14:03,520 --> 00:14:04,010 True. 173 00:14:04,240 --> 00:14:08,640 So at that point, we're going to try at one time to make a request to the local data. 174 00:14:08,950 --> 00:14:12,570 So let's update the website URL to the incorrect path. 175 00:14:13,150 --> 00:14:18,820 And so now what happened here is that we're able to catch the error. 176 00:14:19,780 --> 00:14:26,320 So we were able weren't able to load to the Web URL, but the application continued and then it loaded 177 00:14:26,320 --> 00:14:27,380 into local. 178 00:14:27,760 --> 00:14:36,940 So the reason that I added an attempt counter and the condition was that this way, if we are missing 179 00:14:36,940 --> 00:14:43,810 the local file by whatever reason, then we're not going to keep trying to make the fach requests. 180 00:14:43,930 --> 00:14:49,740 Otherwise we're going to keep trying to make the factual requests using the get data path and we'll 181 00:14:49,750 --> 00:14:54,380 continuously try to get to the local path, which isn't going to work out too well. 182 00:14:55,150 --> 00:14:57,850 So you can add that in as well as a failsafe. 183 00:14:58,150 --> 00:15:04,330 So if you do have any problems with loading the data or if the path is incorrect, then you can always 184 00:15:04,330 --> 00:15:06,190 revert back to the local data. 185 00:15:06,730 --> 00:15:11,080 So let's apply some styling and go over to Google thoughts. 186 00:15:11,090 --> 00:15:21,430 Let's update and select nice font that we can use and we can import the font into our styling and then 187 00:15:21,430 --> 00:15:23,730 use the font within the output area. 188 00:15:24,790 --> 00:15:29,250 And actually I'm going to use it within the entire body element. 189 00:15:29,710 --> 00:15:31,360 So let's go back and refresh. 190 00:15:33,640 --> 00:15:44,110 And let's center the content and add some padding, so that looks like now we've got our Jason being 191 00:15:44,110 --> 00:15:44,660 loaded there. 192 00:15:45,220 --> 00:15:51,730 Let's set up alternating roll colors within the JavaScript, and this is, of course, optional. 193 00:15:52,330 --> 00:16:01,170 So as we loop through each one of the elements, I to get the index value of the elements and will I 194 00:16:01,180 --> 00:16:05,440 put the index value so the index is zero one two. 195 00:16:06,190 --> 00:16:11,500 So with the index value, we can check to see if it's odd or even. 196 00:16:12,580 --> 00:16:20,680 So let's set a background color using a territory operator and checking index and using the modulus. 197 00:16:20,800 --> 00:16:26,670 So checking to get a remainder and I'll output this value into the console. 198 00:16:27,010 --> 00:16:34,060 And if it is equal to zero, then let's set the color to this. 199 00:16:35,980 --> 00:16:38,620 Otherwise we set the color just to wait. 200 00:16:40,330 --> 00:16:49,540 So either way, we're going to be producing a background color and adding in one more div style and 201 00:16:50,410 --> 00:16:58,560 set the background to whatever value we have for Biji and then we'll close off the diff, the parent 202 00:16:58,560 --> 00:16:58,840 operative. 203 00:17:01,390 --> 00:17:03,910 And it does look like something went wrong there. 204 00:17:03,920 --> 00:17:10,050 So let's save that again and check what we've got for the element content. 205 00:17:10,210 --> 00:17:14,200 And I did forget one quote there, so that's why that wasn't working. 206 00:17:14,200 --> 00:17:18,970 And what it's doing is it's actually automatically adjusting and closing the device. 207 00:17:19,300 --> 00:17:21,190 So we don't necessarily want that. 208 00:17:21,730 --> 00:17:27,570 So let's add this into a parent div and then we're going to spend the div to that output page. 209 00:17:28,300 --> 00:17:38,470 So let's create a separate div and using that document to create elements and selecting the creating 210 00:17:38,470 --> 00:17:46,390 and elements and then within the div so its style and then the background color can be equal to whatever 211 00:17:46,390 --> 00:17:47,740 we've got for background. 212 00:17:50,400 --> 00:17:56,470 And we can even simplify this even more if we want to, by just assigning the value as a territory operator. 213 00:17:57,510 --> 00:18:06,800 And now within the Divx, the inner HTML, they can set the inner HTML of the div. 214 00:18:07,740 --> 00:18:15,900 And then lastly, we'll just add the div to the output page so we'll append the content and then take 215 00:18:15,900 --> 00:18:22,620 output, append the newly created diff to the page and let's see what that looks like. 216 00:18:22,860 --> 00:18:25,160 So now we've got our alternating colors. 217 00:18:26,130 --> 00:18:27,030 So that's an option. 218 00:18:27,030 --> 00:18:28,710 You don't have to add that in, of course. 219 00:18:29,220 --> 00:18:33,860 So that was just to apply some styling so that the data that's coming out is more readable. 220 00:18:34,470 --> 00:18:37,540 And then, of course, you can adjust the colors as needed as well. 221 00:18:38,280 --> 00:18:43,730 So go ahead, try it out and make a connection to the web endpoint. 222 00:18:43,740 --> 00:18:48,120 You can use the same one that I used and then also create a local version of the file. 223 00:18:48,420 --> 00:18:53,670 And once you do that, then make some connections and output it on the page using Ajax. 224 00:18:56,250 --> 00:19:03,030 Thanks for this lesson, are to make an Ajax request to the Web, your URL also create a local version 225 00:19:03,030 --> 00:19:10,320 of the JSON data that's going to be stored locally so that you can connect to it and add in catch into 226 00:19:10,320 --> 00:19:18,780 your fetch request to ensure that if the Web URL data does not load or the Web you URL does not translate 227 00:19:18,780 --> 00:19:25,020 properly, that you can use the data that's locally stored than the JSON file and still have some output 228 00:19:25,020 --> 00:19:25,800 for the page. 229 00:19:25,950 --> 00:19:32,670 And then last and finally output all of the content from the JSON object onto your web page and you 230 00:19:32,670 --> 00:19:34,890 can apply some staling and make it look nice.