1 00:00:00,780 --> 00:00:08,910 So in this lesson, we're going to be making a request to the Wikipedia API and then returning the data 2 00:00:08,910 --> 00:00:12,990 back onto the page, so we've got two parameters here. 3 00:00:12,990 --> 00:00:14,840 So we've got an input and a button. 4 00:00:15,240 --> 00:00:20,870 So within here you can enter in a search term and then load the JSON data. 5 00:00:21,330 --> 00:00:24,980 And this JSON data is coming from the Wikipedia page. 6 00:00:25,350 --> 00:00:27,340 So it's coming from this Wikipedia page. 7 00:00:27,750 --> 00:00:34,290 We've got some basic search information as well as the results array that we loop through the array 8 00:00:34,320 --> 00:00:36,840 and output the results onto the page. 9 00:00:39,270 --> 00:00:46,170 So that includes the title, some of the information on the page, and then the snippet from the page 10 00:00:46,170 --> 00:00:46,610 itself. 11 00:00:46,620 --> 00:00:49,610 And this is all within the JSON data that's returned. 12 00:00:49,980 --> 00:00:56,880 And then you can also click these and these are going to open up within Wikipedia to the corresponding 13 00:00:56,880 --> 00:00:57,240 page. 14 00:00:58,050 --> 00:01:04,830 And whatever term you put in there, it's going to give you results, the total number of results and 15 00:01:04,830 --> 00:01:10,590 the first 10 entries formatted within the same way where you can click over to the page. 16 00:01:10,890 --> 00:01:19,380 And the objective is to go through the Wikipedia API and get some of that JSON data back and put it 17 00:01:19,380 --> 00:01:20,070 onto the page. 18 00:01:20,220 --> 00:01:22,380 So make use of the data that's on the page. 19 00:01:23,790 --> 00:01:26,160 And there's quite a bit that you can do with this API. 20 00:01:26,340 --> 00:01:34,110 So a lot of information here so you can really get some good practice in working with Jason and Ajax 21 00:01:34,110 --> 00:01:34,590 requests. 22 00:01:35,760 --> 00:01:38,860 Let's go ahead and connect to the Wikipedia API. 23 00:01:38,880 --> 00:01:45,780 There's more information available about the Wikipedia API over at the Wikipedia API. 24 00:01:46,980 --> 00:01:51,580 So give you some examples, documentation, examples of how to make a connection. 25 00:01:51,750 --> 00:01:53,970 So we're going to be just doing a simple query. 26 00:01:54,240 --> 00:01:59,310 And as you can see, there's quite a lot of parameters that you can enter in to make your request to 27 00:01:59,310 --> 00:02:00,060 this API. 28 00:02:00,070 --> 00:02:01,610 So it's a fairly rich API. 29 00:02:01,620 --> 00:02:11,250 There's a lot of data on Wikipedia and it's a great place to testing out the API requests and getting 30 00:02:11,250 --> 00:02:13,150 some content back onto the page. 31 00:02:15,300 --> 00:02:18,900 So let's go ahead and select this endpoint. 32 00:02:20,400 --> 00:02:25,910 And I've updated the indexed HTML to connect to up to James. 33 00:02:26,250 --> 00:02:30,350 Kept some of the content from the last one and we don't need that. 34 00:02:30,360 --> 00:02:33,600 And I'll just update the Web URL to the Wikipedia. 35 00:02:33,900 --> 00:02:40,220 And then what we'll do is within the get request, we can add in these as parameters into the get requests. 36 00:02:40,230 --> 00:02:41,760 So it does have a search term. 37 00:02:42,390 --> 00:02:48,630 So first off, we're just going to make the initial connection to the euro and then output that into 38 00:02:48,630 --> 00:02:49,410 the console. 39 00:02:49,590 --> 00:02:55,360 And from there will go and we'll continue to build out the endpoint and output the data. 40 00:02:55,380 --> 00:02:57,300 So let's add an event listener. 41 00:02:57,690 --> 00:03:03,240 So that event listener that we're listening for on the button is going to be click and then returning 42 00:03:03,240 --> 00:03:04,800 back the event object. 43 00:03:04,950 --> 00:03:10,950 And this is where we're going to make our fetch request to this fetch request is going to the Web URL. 44 00:03:11,250 --> 00:03:19,080 And then once the request is made, we return back the response content as a Jason object. 45 00:03:20,910 --> 00:03:24,390 So take it back as JSON using the Jason method. 46 00:03:24,900 --> 00:03:29,210 And then the next promise is where we actually get that JSON as data. 47 00:03:29,730 --> 00:03:34,910 And from there we can console, log and output the data content onto the page. 48 00:03:35,490 --> 00:03:36,720 So let's try it. 49 00:03:38,190 --> 00:03:41,100 And we do need to make sure that we've got the return. 50 00:03:42,990 --> 00:03:52,080 So we do have a successful connection to the Wikipedia and point and we've got some search results. 51 00:03:52,110 --> 00:03:54,750 So this is the array that we want to output on the page. 52 00:03:55,140 --> 00:03:59,430 And it's got some titles, word count timestamps. 53 00:03:59,640 --> 00:04:05,640 So it's got some basic information, page I.D. and so on, as well as a snippet returning back some 54 00:04:05,640 --> 00:04:06,190 content. 55 00:04:06,510 --> 00:04:12,090 So what we want to do is we want to loop through the query and the search and if it does have a length, 56 00:04:12,390 --> 00:04:14,280 then returned back the content. 57 00:04:14,490 --> 00:04:17,570 We can also output some of these other values that we have here. 58 00:04:18,420 --> 00:04:20,260 There's also the offset. 59 00:04:20,280 --> 00:04:24,240 So if we want to continue and load additional pages, we could do that as well. 60 00:04:26,130 --> 00:04:29,580 So let's create a function and we can just call that and make her. 61 00:04:29,910 --> 00:04:34,800 And what this is going to do is this is going to loop through iterate the data that's being returned. 62 00:04:35,520 --> 00:04:37,620 And so we're just going to focus in this lesson. 63 00:04:37,620 --> 00:04:40,640 We're just going to focus on the query data. 64 00:04:40,650 --> 00:04:45,390 So we'll send over the data as from the query object. 65 00:04:45,930 --> 00:04:53,100 And then from here, we can loop through the data and get the search results and then this should have 66 00:04:53,100 --> 00:04:54,980 a length associated with it. 67 00:04:55,500 --> 00:04:58,440 So now that we've got just the search object. 68 00:05:02,650 --> 00:05:10,180 And let's instead of console logging it out, we'll load it to the function, so that just returns back 69 00:05:10,180 --> 00:05:11,700 the array of results. 70 00:05:12,220 --> 00:05:16,810 So that makes it fairly easy to loop through the data search results. 71 00:05:17,140 --> 00:05:22,900 And we can even simplify this as well and do data query search. 72 00:05:23,200 --> 00:05:25,980 And that way we're just getting the array with a length. 73 00:05:26,590 --> 00:05:32,710 And that's going to make it easy for the next part where we're doing a for each and looping through, 74 00:05:32,710 --> 00:05:37,230 returning back each one of the elements and then putting them onto the page. 75 00:05:38,320 --> 00:05:46,720 So let's consider log that element object again, making the connection and using the console in order 76 00:05:46,720 --> 00:05:48,910 to see the content that we want to output. 77 00:05:49,690 --> 00:05:55,090 So what we want to do is on the output page, we want to output the results. 78 00:05:55,420 --> 00:05:58,480 So take output and update the entire HTML. 79 00:06:00,160 --> 00:06:03,730 And for whatever the search term is, we'll add that in afterwards. 80 00:06:10,300 --> 00:06:19,810 So let's return back and we'll construct the page content for this, so we'll have a main div container 81 00:06:20,050 --> 00:06:28,750 using the document, create elements, create the elements as a div, and then within the div, we're 82 00:06:28,750 --> 00:06:31,300 going to attend the additional pieces of content. 83 00:06:31,720 --> 00:06:37,960 So we have an option here where if we want to, we could populate the div with this content or we could 84 00:06:37,960 --> 00:06:39,370 add additional elements. 85 00:06:39,850 --> 00:06:48,280 So in this case, just to keep things simple, let's update the HTML so we'll add to the HTML using 86 00:06:48,280 --> 00:06:55,090 the template literals the back tax and for now we'll just output the title. 87 00:06:58,070 --> 00:07:04,430 And then lastly, let's take output's and append output with the newly created element. 88 00:07:05,630 --> 00:07:08,770 So this should load all of the titles onto the page. 89 00:07:08,780 --> 00:07:13,640 So there's the titles so search for and it's returning back to the content. 90 00:07:14,780 --> 00:07:16,910 Each one of these also has a snippet. 91 00:07:16,940 --> 00:07:18,290 So this is HTML. 92 00:07:20,750 --> 00:07:23,810 So potentially we could output this as HTML. 93 00:07:28,160 --> 00:07:37,310 So we just add to it and we'll add the results of the elements, and this is just referred to as a snippet 94 00:07:39,470 --> 00:07:41,000 suit that looks like on the page. 95 00:07:41,980 --> 00:07:45,440 So now it's adding in the results for the snippet. 96 00:07:47,360 --> 00:07:53,270 Let's also apply some styling and we'll just give it a class of box padding. 97 00:07:56,770 --> 00:08:06,370 And set the margin to Ordos, we can center the content of the width of the content to be 80 percent 98 00:08:06,370 --> 00:08:13,360 so we can center it also adds to a border so around at one pixelate border. 99 00:08:15,130 --> 00:08:17,320 And let's also do a border radius. 100 00:08:18,790 --> 00:08:21,370 So it's slightly rounded borders or surface looks like. 101 00:08:21,970 --> 00:08:24,240 And of course, we can always adjust this as needed. 102 00:08:24,400 --> 00:08:27,000 And of course, we need to add the style. 103 00:08:27,010 --> 00:08:33,370 So take the div using class list and the class of box to it. 104 00:08:33,910 --> 00:08:36,160 So that will apply styling to the results. 105 00:08:38,140 --> 00:08:40,760 So it's easier to read the results. 106 00:08:41,530 --> 00:08:48,740 You can also apply some styling to the title, so to close those off. 107 00:08:50,380 --> 00:08:58,170 And also, if you wanted to, you could add in the page ID and the word count as well. 108 00:08:58,750 --> 00:09:09,700 So let's add those values in so these can just be span's or actually set them up as divs directly within 109 00:09:09,700 --> 00:09:18,640 the box and then we can apply some additional styling to Box and Divs that are immediately within it. 110 00:09:22,720 --> 00:09:30,720 Padding is going to be picks and let's update the font size to one point to. 111 00:09:32,460 --> 00:09:36,440 So within the device right now, we're just loading that title again. 112 00:09:37,320 --> 00:09:40,680 But what we want to load is we want to load some of these numbers. 113 00:09:41,040 --> 00:09:43,650 So let's load it in the page ID. 114 00:09:48,500 --> 00:09:49,400 Page I.D.. 115 00:09:52,430 --> 00:09:56,330 And just have some dashes or the pipes to separate these 116 00:09:59,000 --> 00:10:03,380 and we'll use the same format, so we've got a size. 117 00:10:05,240 --> 00:10:08,990 So number of values here that we can use and output. 118 00:10:13,130 --> 00:10:16,490 And let's do one last one and we'll do the word count. 119 00:10:19,910 --> 00:10:26,360 And that's under the object word count, so what I'm doing is I'm just looking at what we've got here 120 00:10:26,540 --> 00:10:32,300 within the console and the breakdown of the object and picking up the pieces of the object that I want 121 00:10:32,300 --> 00:10:32,690 to use. 122 00:10:33,830 --> 00:10:37,900 And because we have the page idea, we can also link to the page itself. 123 00:10:38,510 --> 00:10:43,220 So let's add in another option or we can just link within the title tag. 124 00:10:43,370 --> 00:10:50,000 So doing in each ref and the endpoint of the link is going to be whatever the title is or whatever the 125 00:10:50,000 --> 00:10:50,780 ID is. 126 00:10:52,010 --> 00:10:59,000 So we can grab the ID object value here and set the target as blank. 127 00:10:59,000 --> 00:11:01,760 So it opens up to a new page. 128 00:11:07,180 --> 00:11:10,210 And then close that off and then this is where we can use the title. 129 00:11:13,750 --> 00:11:21,970 So low that so now when I click it, it's going to actually open up the corresponding pages on Wikipedia 130 00:11:22,630 --> 00:11:23,440 to our search. 131 00:11:26,120 --> 00:11:33,380 And this is how you can practice and connect to the Wikipedia and point and output the content on the 132 00:11:33,380 --> 00:11:34,340 page accordingly. 133 00:11:34,400 --> 00:11:39,350 I'm also going to just do some quick checks here and update some of the content. 134 00:11:40,580 --> 00:11:46,310 So also let's update the request so we can actually search for whatever field we've got there. 135 00:11:47,030 --> 00:11:54,680 So we're going to update the request you URL to search for a particular term and the rest of this is 136 00:11:54,680 --> 00:11:55,770 going to be OK. 137 00:11:56,060 --> 00:12:00,350 The only one that we need to change is going to be this last part here where we've got the search term. 138 00:12:00,770 --> 00:12:07,640 So let's go ahead and we can remove it out from the endpoint or we could really simplify it and just 139 00:12:08,510 --> 00:12:18,560 pull that information out of the Web URL and let's create temp euro and the temporal is going to be 140 00:12:19,640 --> 00:12:23,470 you URL plus whatever we've got for the search term. 141 00:12:23,960 --> 00:12:32,000 So let's get a search term and the search term can come from the input value here, 142 00:12:36,800 --> 00:12:43,940 or it can just be a default and the default can be JavaScript so that we always have some type of value 143 00:12:43,940 --> 00:12:44,940 for the search term. 144 00:12:46,520 --> 00:12:51,170 And so let's update the tempura with the search term. 145 00:12:51,860 --> 00:12:59,240 We can console log the temp URL out into the console, and then let's also update the URL that we're 146 00:12:59,240 --> 00:13:01,770 making the request to to be the search return. 147 00:13:02,450 --> 00:13:08,510 So now we should get or should be able to pull back different results depending on what we've got within 148 00:13:08,510 --> 00:13:09,160 the search term. 149 00:13:11,630 --> 00:13:16,340 And also we should select and pass the search term. 150 00:13:20,040 --> 00:13:27,800 And let's actually see if we can get the search term dynamically from the data object, and that way 151 00:13:27,830 --> 00:13:30,120 we can pass the data object. 152 00:13:30,600 --> 00:13:31,950 So we've got the query. 153 00:13:36,380 --> 00:13:38,850 And the number of hits for that particular term. 154 00:13:41,660 --> 00:13:49,070 So what we can do is we can update that in output information over here with the data before we send 155 00:13:49,070 --> 00:13:50,030 it over to Maker. 156 00:13:50,780 --> 00:13:55,250 So results for and we're going to have the search term here. 157 00:13:59,210 --> 00:14:02,090 And then let's update in our Tmall. 158 00:14:05,360 --> 00:14:09,770 And I'm using the tactics here, so under the. 159 00:14:13,340 --> 00:14:13,970 Querrey. 160 00:14:17,850 --> 00:14:22,140 So within the data object query and. 161 00:14:23,280 --> 00:14:34,410 Search in full and total hits, I should see a value for the total hits, total results, total results. 162 00:14:36,190 --> 00:14:46,780 And then just do a line break there and I'll wrap this within a div, so results for hello, total results 163 00:14:46,780 --> 00:14:47,410 that we have. 164 00:14:50,920 --> 00:15:01,030 And then we've got the results for JavaScript, let's try JSON and the results that we have for Jason. 165 00:15:05,180 --> 00:15:12,200 Challenge for this lesson is to make an Ajax request to search results on Wikipedia, also make dynamic 166 00:15:12,200 --> 00:15:19,760 input field that that can search for the results on Wikipedia depending on what the value is within 167 00:15:19,760 --> 00:15:20,240 the field. 168 00:15:20,900 --> 00:15:26,090 Create a button that's going to make the page interactive and output the return back. 169 00:15:26,090 --> 00:15:28,310 JSON results onto your webpage. 170 00:15:29,480 --> 00:15:35,540 And then also go further and try out all the different end points and different parameters within your 171 00:15:35,540 --> 00:15:36,590 Wikipedia request.