In this lesson, we're going to be updating the functionality of the app, connecting to a different
endpoint and allowing the user to search by name so they can enter in a name into the search field.
When they click the name, they get their corresponding results so they can enter in whatever name they
want.
And it's going to just return back whatever results are matching within the database.
And once they get the results, they can click it and they can see more details.
So what we're doing here is we're string applying the objects and that includes the arrays as well.
So they're just being string of right here.
There's a number of ways to output this content so you can customize it as needed.
So there's some arrays, there's some objects.
And this is in relation to the content that's being returned back from the click.
And there's quite a bit of information contained within the JSON data.
So multiple levels of the object and they contain arrays, objects.
And this is just a dump of all of the information that's contained for this particular object.
So that's the application that we're going to be building in this lesson.
And instead of loading the data, we're going to make a request to another end point, and that's going
to be a search by country name.
So using the input field that we have.
So going into the application, let's update this to see apps to James and then we're going to duplicate
this content as apps to James.
So that way we're still loading the same application and we're just going to make some updates to the
code so we're no longer going to be hiding and the text content for the button is going to be search.
By name, and then we can get rid of that.
Search.
Country info.
So that's fine, we can leave it at that and then that listener is going to make her request.
So let's update the end point.
And the way that I usually like to do is I like to just copy it out.
So however, we're doing the search and then also try it out as well within that end point just to see
that it's working properly.
So our original base, Earl, is the V2.
So whatever the name is, is going to be what's going to go into the parameters and then for the input
name.
So finalize that with what we've got for the input value.
And right now what we can search, we can set a value.
And right now that maybe we just see United
so that we we're creating the same type of search request that we're returning back here in the example
and then add to it whatever the input value is at the time.
So that allows the user to make an update to the value we make.
The request and sort of create pages will just log it out to the console and let's try that out.
So we return back the six results that are matching with the name.
So we want to output those to the page and we're trying to reuse quite a bit of what we did in the last
lesson.
So we're not reiterating over it.
So we're not creating the pages, but we're outputting the content from that particular page.
So instead of doing the load pages, we're going to pass information into the load of pages.
And then we're also not using the page the pagination so we can remove out that function as well.
And if we want to just load the pages, let's load the pages using the data.
So instead of.
Just looking at the data, we'll do a load of the data.
So for the data itself, we can pass that as a data object and the structure of these objects are going
to be the same as we saw in the last lesson.
So we can loop through each one of them and output the element on the page so that a whole lot of change
that gives this ability to load the contents of each one of those.
So we made some changes to the endpoint and then also the data that we're loading with, not with very
minimal change to the actual source code.
And also, let's do a quick update on what we're outputting.
So we've got access to all of this information.
We can also update and have a native name as well.
So setting that information might create the node.
And this will be Title two and append it to me.
It can be a div and this can just be a regular div, it doesn't work.
So we don't even need to include a defense to it because we're already wrapping it within a div.
So instead of name, take the object information native name.
And so that will output sometimes through something different onto the page and we don't need that title
to.
Just underneath the flag, if you want some additional information, we can also have multiple different,
sir, just giving the object a name and you don't actually need to give it a name if you just want to
create a node suspending it to.
And if it's a div.
So if you want to add another div.
And instead of the native name sub region, so creating the function is really saving a lot of time
and it's allowing us to very easily update the content that we're outputting and customize it.
So if you do want to apply some additional styling or properties to the element, you can make that
selection.
And if you just want to output the information, you can do that as well.
Let's add one more function to this.
And within mean, we're going to add an event listener and this event listener is going to load the
information.
And because the search already returned back, all of the object details, we can just pass over the
object details that we have for this particular element and we can build a new page from it.
So we're adding an event listener.
The event is going to be click and whenever the page gets clicked.
We can let it create a separate page.
And let's get rid of that so at the event listener.
And make a page and just pass through the data from the object.
So when we do want to make a separate page of content.
Make a page and this will load all of the page data.
So we can actually load through and list out all of the existing values that we have within the properties.
So because the data is going to be a large object, we can use the object methods and get the keys from
the object and setting up the object as data.
And then because it's going to return back injury, we can loop through each one of those and get the
key value from the array.
And that way, if we can output the contents of the key and we'll do the do a console of the key value.
And if we want to see the key information, we can use the bracket notation and using the data and specifying
the key, that's going to return back the value.
So this is the value and that's going to be the object key.
And that way, we can prepare for what we want to output on the page and then using that function that
we were constructing the content, we can easily construct that content.
So now whenever I click it.
And let me clear that and we'll click it one more time, it loads through all of the values.
So all of the properties and then notice as well, some of them are going to be.
So we want to loop through those.
So if they do have a length, then we want to loop through them.
And then again, some of them are going to be objects.
So there's three that look like that they're going to be objects, so if we want to output all of this
information, we can check to see if the data has a length.
And if it does, then it's going to be an array.
So let's output this.
And what we'll do is we'll create a main page elements, so attach it to output and then as we iterate
through, actually that's the wrong function to create the main page object using the function, and
then we can create nodes appending them to mean with the contents of the data key.
So this will just create a completely new page.
And we'll also clear out any of the existing content with an output.
And then we always have the search to load the content back.
So we make our initial request, we make a click of it so that outputs the content.
And if these are going to be objects that we might want to iterate through the object as well.
So let's create a separate function called object outputs, and this is going to take in whatever the
object value is.
So copying that information.
And then we'll use the object output or.
To output the values of data
and now that we can pass in an object instead of data, this will be object.
And we also need to have whatever the parent is going to be, so the parent in this case is going to
be the main object.
So we're passing in a couple objects as parameters, and that's so that we can create the note properly
and attach it to the proper element.
So that means that if the key is an object.
So if.
Type of data key.
Is equal to object, then we're going to actually send it in through here.
And that's going to be whatever the current object value is.
Or else it's just going to create a..
So let's see how that works.
So do a search click at.
So it looked like we did have an issue there of the content that we passed.
So most of the content that was able to output, but we did encounter some issues with a value of NUL.
So we'll output this into the console first and we'll continue to just create the nodes and do some
debugging, so to block comment toggle.
And also we're going to output into the console, the data type.
So there might have been a reason for that, it's not being returned back and check the data types.
So we are getting that they are an object data type, and in this case, maybe because there was a null
value there, that it wasn't it didn't have any keys, that it was throwing an error.
So the number of options that you have for that.
And the reason that was happening here is that it was just being passed in as null.
So what I'm going to do is if it is a type of object.
Then let's set the value and we're just going to have a string of high value.
So if and we'll set a variable of value and this is whatever the value of the object is.
And we'll update this value, so if it is a value, then let's take value and use Jason String Afie
to string Afie that value so that I would put a string of fied version of the value.
And then when we create the node, we're just going to use whatever we've got for value.
And this move to create node just above, we close the function, do some indents there, so try that
one more time.
So that give us the string of output of the content.
So it looks like we're ready to complete the application.
So we see we can do a search or turn back information, we'll want to have the hovering effect over
the elements.
So let's add to baulks, Hova, and if we hover, we'll just update the background color.
To be slightly off point.
And also, let's update the cursor.
To pointer.
Now, whenever we hover over it, get this type of effect also for the output.
Just create a class called Infl.
And I'll copy some of the styling properties from there.
Also update the font size.
So setting a margin, we won't need the cursor and apply the class of info to the main parent.
So it's Takamine List ad, and we'll add the class of info to it.
And then let's also add some padding or borders padding, and I was just going to copy it to keep things
simple.
And I've got padding there twice, so let's see what that looks like, snow.
We've got the countries on the search.
If we click it, that gives us an output of the country content.
You can customize this as needed.
The task for this lesson are to connect to the API and return that JSON data allowing the user to customize
the request parameters.
So we are going to be doing a search.
So according to whatever the user input value is, it should adjust the content that's being returned
back from the endpoint of the API load.
All of the object details per item.
Allow the user to make a selection of those items and then generate the page data from that user selection
and pass in the JSON and the JavaScript object from one function to another, allowing the user to see
all of the contents of the object.