In this lesson, we are going to be a loading country information, so creating a mini application that's
going to load the country information using the rest countries, EU, API, so it's an open API.
And what it does is it allows you to load a lot of country information.
So there's a lot of information contained within the object response.
And it is suggested that as you're building the application, access some of the different content and
build out your own version of the application.
So the one that we're going to be demonstrating in this lesson is going to load all of the country information
and then chunk it into blocks of ten countries per page.
And it gives you some brief information about the country, the population, the flag, the name, the
currency.
And you can click through and check out any of the countries that have been lauded.
And also the exercise is going to demonstrate how we can save requests, be making multiple requests
to the page when we load all of the page information directly into one object that's going to be stored
in the JavaScript and then we can break apart the page contents separately.
And this is all done with JavaScript.
So there's one initial fach request that's done to the API connecting to the rest countries.
Dot EU API says a lot of information contained within this API.
This is the endpoint that we're going to be using.
So it's reste countries dot EU for its address photography to, for example.
So returning back all of the available data and there's more information and documentation over at the
website.
So different endpoints that you can connect to, you can select by country as well.
You can select by full name code, Lyster codes, currencies and all of this information that can be
retrieved back.
So going into the editor, we've got the standard HTML template that we've been using.
So including several different elements on the page so that each one, the input, the button, the
output area, and then we're linking over to the script source.
And this is where we're copied over some of the content from the previous project.
So connecting to the button, connecting to the one element, connecting to the output and input element
so that we can pick up any information that is input there.
Let's also add in the euro, so have the endpoint.
So that's going to be the endpoint that we're connecting to.
And then to adjust it, we can use the all as a parameter.
So we're going to just initially be connecting to the V2 and then adding in all as one of the parameters.
So to search for all, we also have the button the event listener added to the button.
So when I click the button, we see ready being output into the console.
So from here, let's make our Thach connection.
So we'll set up a variable name and call that parameters.
So this is where we can enter in the value for the parameters.
And that's just going to be all for now.
And we're going to also set up our URL so this can serve as the base euro.
And then the final URL is going to take that base URL and concatenate together.
So add it adding in the parameters that we want to make the request here and then launching the Thach
request.
And with the first promise of returning back the response object and when we get the response object
using the Jason method to return back the actual data.
And then once we do get the response, returned back the data, and for now we're going to log it out
into the console and then we're going to deconstruct JavaScript object so that we can output some content
on the page.
So that returns back quite a bit of information.
Says two hundred and fifty different elements there that it's returning back.
And all each one of these has quite a bit of information contained within the object.
So let's output the items that are being returned back.
So we're just doing a request for all and will create a way to output the content.
So we want to loop through the data object.
So this is going to be the array that we're looking for and the array is always indicated with the length.
So if you can iterate through it, that means that you can get the length out.
So let's create another let's create some functions in order to accommodate that.
So.
So it'll be load pages and pass in the data object into the pages and then within the console will output
the data and then update this system, the console log.
We're going to load the pages.
So right now, it'll do the same thing when we click the button and we want to iterate through using
for each so looping through each one of the items within the array and then returning back each element
that's contained within the array.
And from there we can log out the contents of the elements.
This should actually be element and as we look through each one of the objects, we can output and create
the country.
So the page elements and we can also call this data and then thus this can get passed in as a page element,
and now we want to construct some content on the page for each one of these items.
And there is a lot of stuff listed here.
So what we can do is we can load the data initially and loaded into an object that we can group to different
pages if we want.
So let's create a global page and just have an object here.
And then within this object, this can just be JSON and an object sitting with an object.
So we'll have an AI content within the page, Jason.
So once the content has loaded, we take that page JSON and actually it's going to be page JSON and
equal that to whatever we've got in data.
And that way when we load the pages.
We can just reference the page data.
So let's try that and just make sure that's working.
So now this object is represented within the page JSON object and you clear it and you type in the page
object.
You can see that we've loaded in this jigsaw an array.
And this is just one way that if you're using this data, you can cut down on the number of requests
to the server.
So some of the APIs will have limits to the number of requests you can make.
So this is one way where you can load all of the data within one shot and then make use of the data
so you can divide it up into separate pages if you want.
So if you want to create pages from the object and create the pages and for the global page object,
so the value of one, so they'll start on whatever the first pages and then how many items we want to
have per page, we can divide it up.
So if one of 10 per page, all of that information is contained.
And the reason that I use an object here is that this provides us the flexibility to have it dynamically
generate the pages.
So if we were to preset it that we want 10 per page and we load all of the JSON object, then we don't
have any flexibility to change that.
So in order to change the number of items per page, we can easily just update this and change this.
So let's construct the page elements and then we're going to load some pages down below that the user
can select from.
And then this information, we're not going to make a separate request.
We're just going to use the current page JSON object.
So initially we're going to load the content and then that's going to allow us to create the pages and
then we'll use the load pages to load through and create each one of the page elements.
So let's start by chunking the page data.
So we're going to send this over to create pages and then we're going to just load the one page of data.
And we don't actually even have to pass anything in here because we're going to have all of the content
listed within the page JSON as well.
We're going to have a page and a page number that we can use.
So we're going to have a page, page and a page JSON with all of the contents.
So let's separate out and use the create pages.
And one of the easiest ways to create the pages is to load the page JSON content with the data and then
construct the pages initially.
So what this is going to do is it's going to do a full page load, create the pages that we can interact
with on the screen.
So we're going to chunk the data that's passed in here into page data.
So creating a for loop let AI equals zero.
And I'm going to also update this to instead of JSON will have an array of all of the pages in here
and we can also keep the JSON object as well.
So the array will contain all of the page information and we're going to be able to generate depending
on which array we want to use, that's going to be the pages that we're setting up.
So it's going to initially take the page array.
And if you want to clear out the contents of an array, you can just set the length to zero and that
will clear any existing content within the page.
We've also got the number per page, so let's set that up and or we can count how many pages we have.
So with the value of P total for page total, so we're take the length of the data and divide that by
page and the number per page.
So that's going to give us total value and then we're going to loop through while AI is less than the
total value and increment I plus one.
And then as we load through, we want to push the data.
So we want to chunk the data into the number of pages that we would have within the total.
So let's log out the page total value and save that.
So when we click it, we're going to have twenty five pages total.
So as we loop through, we're going to select and we're going to slice the initial array.
So that's going to be the data array and we're going to be appending to or adding to the temporary array.
So let's set up a holder.
So that will just be the temporary array.
And right now, that can be a blank array.
And then every time we iterate through the loop, we can set the value of temporary to equal to the
contents the slice of the data.
So the data, remember, is going to be the one where we've got the actual data.
So using slice and setting the starting point of the slice is going to be whatever the value of is.
And then the ending point, the number of contents that we're going to take is going to be I plus the
page per.
So the items per page.
And at the end this will create a temporary array.
But what we want to do with the temporary array is we also want to push it into the main array.
So within the array, let's push the temp array into that.
And we can console log out the contents of page afterwards, and actually because this is global, it's
assigning the same it's showing up as the same content.
So let's separate out the chunking.
So there is a calculation error here is that we're incrementing I with one, but we're splitting it
up from starting point of AI and then ending at AI plus per page, so easily incrementing by one.
But we want to increment I by the value of per page.
So let's make a quick update.
So instead of looping through and going to the total, we can just separated out whatever the data length
is and that will automatically loop through till whatever we've got the end length for it.
So that will return back the full two hundred and fifty five entries, and instead of adding just with
I, we're going to update I and add the page per so this will change the value of I.
So the starting point of I will be zero at first and then the next iteration it will be the I plus the
per page value and that will allow us to chunk it.
So let's try that one more time.
And now when we look at the results, we've got different results.
And when we look at the end arrays, we've got all of the data loaded within the arrays.
So we've got all twenty four pages or twenty five pages broken down within the page array.
So that means that we can load the page contents.
So when we do the load pages, this function will load the page contents and we can return back instead
of data.
We've got the contents within page array and whatever the current page.
Page is going to be so that's the way that we're going to use and return back the array according to
whatever the index value is.
So that means that we can loop out and return back each one of the page elements.
And then when we want to build them and add them to the page right now, we'll just put them as data.
So I know we've got quite a few console messages, so let's comment out some of them.
So it's a lot more clear as to what we're doing.
And now we're not using the P total anymore either.
So click it.
And it's outputting the contents that are contained within the first part of the page array.
So these are the first set of values and actually it's starting with a base of zero.
So this is the array.
It's a base of zero.
So that's where we need to add one to the page value or we need to subtract one to get the index value.
So now it's going to load the content accordingly.
So it should load the first set of data and that's starting with Afghanistan.
So let's go take a closer look at this object and take out what we want to output on the page.
So let's create another function that's going to create node.
We're going to need a parent value and I'll type and as well as any HTML content that we want to include
in it.
So this is just going to be a better way or simpler way to create the content for the page.
Or we can pull the information out of the data object that's being added into the console.
So let's create
within the.
Mean Divx using the create noad method that we just created and the parent is going to be output, so
that's the output page element with a class of output that we're putting onto the page.
So let's clear out the content that can be contained within there by using output and then updating
the inner HTML of that element.
So it's going to clear out the current existing content and allow us to update content into it.
So if we want to create a main container, this can be a div and then the content contained within here
that each HTML is just going to be blank.
So when we pass the content into there, we can construct, create the temporary element and using the
documents create elements and the element type is passed into the function.
So that's the element type that we're going to create and then using the parent object that we want
to pander to and then append append the element to the parent.
And then for the elements, let's update the inner HTML and apply the HTML object information that we've
sent into to the function.
And then lastly, we're going to return back the element object.
So this is just a quick way to avoid the repetition of constantly using the document crit element to
create the nodes where we can create the one main node and then within the main node we can set and
pull out information from the data object.
So let's select the data objects and set some content into it.
So in this case, we're going to create the.
The title and using the create a. function.
Appending it to mean if you want to have it within a div and then the contents of the title, so this
can be HTML and we can use the back text, so this can just be an HTML string.
I'm also going to wrap the the word wrap and then using the dollar sign, selecting the value and that's
going to be name.
And maybe we want to set this as an age two so that each one of them is going to be distinct close off
the two.
And the reason I'm assigning variable values to them is I'm also returning the elements of one to apply
some styling to the title.
We can do that as well.
This can just be starts, so now I can take the title elements and I can apply styling to it, and if
I wanted the color of the font to be red, I can do that.
And then within the stats and let's load it.
So now we're loading all of the pages.
And this is the second one there that we're creating a stats, so that's why it's still within a black
color, because we haven't updated that.
So for the stats themselves, let's create or create a variable called HTML one.
And then within this, this is where we can list out all of the stats and then we'll pass that value
into the function.
So it makes it more readable.
So whatever stats we want to pull out of here and you can also select different stats as well as needed.
So let's add in some of those stats.
And if you want to get the population,
add the population value into their.
And that's going to be within the data collection and then you can add to that HTML.
So let me turn into LAT and this way we can add to it.
So what other information that we want to pull back?
We can add that information.
And and so currencies is going to be an array of currencies.
If there's only one item within the array, maybe we want to pull up the first item that's contained
within the array.
So currency and that's contained within data.
Currencies and whatever the first item is within that array, and let's just put the name.
And then also, if we want the symbol, we can add the symbol in as well.
So that's going to add the currency as a separate div if we want to add the flag.
So the flag is an SPG, so maybe even right in the beginning before we add the details.
We have an image for the flag or give it a name, a flag, and let's use the create node, so creating
an image object, we're not passing in any content into the HTML so we can clear that field and then
for flag set.
So it's an attribute and source and the source of the flag is going to be data flag.
So let's see how that looks and.
We can get rid of the courts there for him on.
So you've got the countries being loaded, their flags being loaded, and we can also apply some styling
to this.
So this is a class of box.
And with of 80 percent margin, set that to order such centers and text line, how about we centralized
the text?
And for baulks.
Images set the max width to 100 percent, and that will make it responsive within the contents of the
parent.
Also for the box, each 2s.
Sirtex transform and transform it to uppercase, and we'll see what that looks like, and I do need
to still apply to the main object ZAMEEN class first add and the class that we're adding is going to
be box.
So load it one more time.
And that way we've applied the properties to each one of these.
And so now we want to load the pages at the bottom so the user can navigate to the other pages.
So we're we're creating the pages within the function, we're slicing and chunking the data into the
array, and then we're loading the page content and then at the bottom, we want to have another function
that's going to load.
So it's going to load all of the page indicators so that this can be done right at the bottom and we're
going to just append it to the output.
So create another element that we can call the main container.
So just use the same format and it's going to be attached to output.
And then we want to loop through all of the page array length.
So using four left eye equals zero.
And then while I is less than the page array length, so that will give us a value numeric value and
increment it by, by one.
So let's construct the page elements at the bottom.
And this is just going to be whatever we want for the page clicking.
So create the note again.
And we're spending this one to the main object, and they can be diffs or they can be span's.
We're going to be playing a class to them anyway, and then the contents of them are going to be whatever
the value of I plus one is.
And then for the page.
And these are just going to be the indicators, so let's use class list and add a class.
And the class that we're adding is pigs for the pages, so let's set up the class.
Add some padding for each one of those.
And border, let's have a border radius for styling.
And also for the cursor pointer to set up a cursor pointer and for the color.
Said it to whites and the background color looks set to black, so as we loop through, we've added
the class of pages and then we also want to make these clickable.
So add an event listener and the event listener is going to be listening for a click event.
And if the click event happens, then we want to.
Load the next page.
So all we need to do is increase or assign the value of the page to whatever the contents of the current
E-Plus one is, so it's going to be whatever the pages that we want to click.
So I plus one and set the page page to equal I plus one and then we load pages and that will set up
the whole process again where we're going to.
Lord pages, and we're actually going to load the pagination after we load all of the pages.
So let's try it and now we've got the first listing there and actually we need to make these displays
style in line.
So as an inline block and then we can set with.
50 pics.
So that way there are more of indicators, so let's try to go to the last page and that's going to load
the last page of content and make the images smaller.
So set with.
To be 20 pics, two hundred pics, just be a little bit more readable, so these are all the different
page indicators.
So if we click them, we can navigate through the pages of content and we don't have to do any type
of page reloads or anything like that.
Let's also make some updates to the site like so text a line center, a line.
The text also plays some podding to these and margin sort of the margin is auto, but for top and bottom,
let's add five picks and auto so we can get rid of that.
And also for the all the elements, we're going to apply the box sizing and use the border box.
And going over to Google fonts.
Let's select an interesting font for the Google fonts and this, of course, whatever you want to do
for styling it so you can apply styling as needed.
So let me load the style and then also let's apply to the body, the font family that we've selected.
So let's see what that looks like and so that's going to load all of the pages, they're going to update
the value within the.
Button
and update the text content.
Pages.
And for the input value, for now, apply the style and display of none, since we're not using it,
so now we can just load the pages and also for each one, let's update the text content and see load
country in info.
So there we go.
So we've got the ability to load countries, navigate through the different pages of country information,
and also if we want to indicate which page we're currently on as we're creating the.
Pagination, the pages we can check to see whatever the current page pages and if it is, then let's
apply some styling to it so we have a condition to see if page page is equal to is equal to equal signs
there to the value of eye and should be actually AI plus one.
And if it is, then we'll take the page.
And style.
And asked it dark brown color.
To be read, so it was a stick out, so this is going to be whatever the active page currently is.
So if I go to page five, page seven, nineteen twenty one and so on, it's loading all of that information.
And it's also important to note that we're saving ourselves, making multiple requests as we're loading
all the page data within one shot.
For this lesson or to connect to the API and try it out, load some of the JSON data back into your
application, make requests from the user button to put the Jason on the webpage, also dynamically
load the content into separate pages, allowing the user the ability to select the content that they
want to view and the page content that they have selected should be displayed to them.
So navigation of all of the JSON data within the Web page.
And then additionally, also output additional information from the Web API onto the page.