So in this lesson, we're going to be making a request to the Wikipedia API and then returning the data
back onto the page, so we've got two parameters here.
So we've got an input and a button.
So within here you can enter in a search term and then load the JSON data.
And this JSON data is coming from the Wikipedia page.
So it's coming from this Wikipedia page.
We've got some basic search information as well as the results array that we loop through the array
and output the results onto the page.
So that includes the title, some of the information on the page, and then the snippet from the page
itself.
And this is all within the JSON data that's returned.
And then you can also click these and these are going to open up within Wikipedia to the corresponding
page.
And whatever term you put in there, it's going to give you results, the total number of results and
the first 10 entries formatted within the same way where you can click over to the page.
And the objective is to go through the Wikipedia API and get some of that JSON data back and put it
onto the page.
So make use of the data that's on the page.
And there's quite a bit that you can do with this API.
So a lot of information here so you can really get some good practice in working with Jason and Ajax
requests.
Let's go ahead and connect to the Wikipedia API.
There's more information available about the Wikipedia API over at the Wikipedia API.
So give you some examples, documentation, examples of how to make a connection.
So we're going to be just doing a simple query.
And as you can see, there's quite a lot of parameters that you can enter in to make your request to
this API.
So it's a fairly rich API.
There's a lot of data on Wikipedia and it's a great place to testing out the API requests and getting
some content back onto the page.
So let's go ahead and select this endpoint.
And I've updated the indexed HTML to connect to up to James.
Kept some of the content from the last one and we don't need that.
And I'll just update the Web URL to the Wikipedia.
And then what we'll do is within the get request, we can add in these as parameters into the get requests.
So it does have a search term.
So first off, we're just going to make the initial connection to the euro and then output that into
the console.
And from there will go and we'll continue to build out the endpoint and output the data.
So let's add an event listener.
So that event listener that we're listening for on the button is going to be click and then returning
back the event object.
And this is where we're going to make our fetch request to this fetch request is going to the Web URL.
And then once the request is made, we return back the response content as a Jason object.
So take it back as JSON using the Jason method.
And then the next promise is where we actually get that JSON as data.
And from there we can console, log and output the data content onto the page.
So let's try it.
And we do need to make sure that we've got the return.
So we do have a successful connection to the Wikipedia and point and we've got some search results.
So this is the array that we want to output on the page.
And it's got some titles, word count timestamps.
So it's got some basic information, page I.D. and so on, as well as a snippet returning back some
content.
So what we want to do is we want to loop through the query and the search and if it does have a length,
then returned back the content.
We can also output some of these other values that we have here.
There's also the offset.
So if we want to continue and load additional pages, we could do that as well.
So let's create a function and we can just call that and make her.
And what this is going to do is this is going to loop through iterate the data that's being returned.
And so we're just going to focus in this lesson.
We're just going to focus on the query data.
So we'll send over the data as from the query object.
And then from here, we can loop through the data and get the search results and then this should have
a length associated with it.
So now that we've got just the search object.
And let's instead of console logging it out, we'll load it to the function, so that just returns back
the array of results.
So that makes it fairly easy to loop through the data search results.
And we can even simplify this as well and do data query search.
And that way we're just getting the array with a length.
And that's going to make it easy for the next part where we're doing a for each and looping through,
returning back each one of the elements and then putting them onto the page.
So let's consider log that element object again, making the connection and using the console in order
to see the content that we want to output.
So what we want to do is on the output page, we want to output the results.
So take output and update the entire HTML.
And for whatever the search term is, we'll add that in afterwards.
So let's return back and we'll construct the page content for this, so we'll have a main div container
using the document, create elements, create the elements as a div, and then within the div, we're
going to attend the additional pieces of content.
So we have an option here where if we want to, we could populate the div with this content or we could
add additional elements.
So in this case, just to keep things simple, let's update the HTML so we'll add to the HTML using
the template literals the back tax and for now we'll just output the title.
And then lastly, let's take output's and append output with the newly created element.
So this should load all of the titles onto the page.
So there's the titles so search for and it's returning back to the content.
Each one of these also has a snippet.
So this is HTML.
So potentially we could output this as HTML.
So we just add to it and we'll add the results of the elements, and this is just referred to as a snippet
suit that looks like on the page.
So now it's adding in the results for the snippet.
Let's also apply some styling and we'll just give it a class of box padding.
And set the margin to Ordos, we can center the content of the width of the content to be 80 percent
so we can center it also adds to a border so around at one pixelate border.
And let's also do a border radius.
So it's slightly rounded borders or surface looks like.
And of course, we can always adjust this as needed.
And of course, we need to add the style.
So take the div using class list and the class of box to it.
So that will apply styling to the results.
So it's easier to read the results.
You can also apply some styling to the title, so to close those off.
And also, if you wanted to, you could add in the page ID and the word count as well.
So let's add those values in so these can just be span's or actually set them up as divs directly within
the box and then we can apply some additional styling to Box and Divs that are immediately within it.
Padding is going to be picks and let's update the font size to one point to.
So within the device right now, we're just loading that title again.
But what we want to load is we want to load some of these numbers.
So let's load it in the page ID.
Page I.D..
And just have some dashes or the pipes to separate these
and we'll use the same format, so we've got a size.
So number of values here that we can use and output.
And let's do one last one and we'll do the word count.
And that's under the object word count, so what I'm doing is I'm just looking at what we've got here
within the console and the breakdown of the object and picking up the pieces of the object that I want
to use.
And because we have the page idea, we can also link to the page itself.
So let's add in another option or we can just link within the title tag.
So doing in each ref and the endpoint of the link is going to be whatever the title is or whatever the
ID is.
So we can grab the ID object value here and set the target as blank.
So it opens up to a new page.
And then close that off and then this is where we can use the title.
So low that so now when I click it, it's going to actually open up the corresponding pages on Wikipedia
to our search.
And this is how you can practice and connect to the Wikipedia and point and output the content on the
page accordingly.
I'm also going to just do some quick checks here and update some of the content.
So also let's update the request so we can actually search for whatever field we've got there.
So we're going to update the request you URL to search for a particular term and the rest of this is
going to be OK.
The only one that we need to change is going to be this last part here where we've got the search term.
So let's go ahead and we can remove it out from the endpoint or we could really simplify it and just
pull that information out of the Web URL and let's create temp euro and the temporal is going to be
you URL plus whatever we've got for the search term.
So let's get a search term and the search term can come from the input value here,
or it can just be a default and the default can be JavaScript so that we always have some type of value
for the search term.
And so let's update the tempura with the search term.
We can console log the temp URL out into the console, and then let's also update the URL that we're
making the request to to be the search return.
So now we should get or should be able to pull back different results depending on what we've got within
the search term.
And also we should select and pass the search term.
And let's actually see if we can get the search term dynamically from the data object, and that way
we can pass the data object.
So we've got the query.
And the number of hits for that particular term.
So what we can do is we can update that in output information over here with the data before we send
it over to Maker.
So results for and we're going to have the search term here.
And then let's update in our Tmall.
And I'm using the tactics here, so under the.
Querrey.
So within the data object query and.
Search in full and total hits, I should see a value for the total hits, total results, total results.
And then just do a line break there and I'll wrap this within a div, so results for hello, total results
that we have.
And then we've got the results for JavaScript, let's try JSON and the results that we have for Jason.
Challenge for this lesson is to make an Ajax request to search results on Wikipedia, also make dynamic
input field that that can search for the results on Wikipedia depending on what the value is within
the field.
Create a button that's going to make the page interactive and output the return back.
JSON results onto your webpage.
And then also go further and try out all the different end points and different parameters within your
Wikipedia request.