This lesson is going to be the ultimate practice lesson where we're going to be connecting to some endpoints
and then dynamically loading the data onto the page.
Now, these endpoints are also going to have different data structures.
You can see that here within the console.
So they're not always going to be structured the same way.
They're going to have different properties and values.
So the objective is to part in order to be able to troubleshoot the various JSON endpoints and how to
handle those.
And then also lastly, of course, how to output the content on the page and make use of the content.
So as you can see, whenever I click the button, it's changing the endpoints.
And this is going to be the final result of this lesson's project where we've got some buttons connecting
to endpoints and then dynamically adjusting and outputting the content on the page.
Let's connect to some endpoints so we've got our indexed HTML file, so cleared out some of the values
from the last lesson.
So staling is clear now and we're still using the same four elements within the body and then linking
it to a script file.
And this is going to be up for James.
And then within the script file, I've got the button connectors, the output area, the value.
And let me get rid of this one, because we don't need to create the second input and have the value
for the input of just test and then also the button click me and whatever the button gets clicked,
then we're going to make our request here.
So I'll output into the console already.
And just to make sure that the button is working so everything looks like it's good and ready to go.
So let's make our request.
And in this case, we're going to be making a request to a few different and points and I'll just be
listing at the end points.
So the purpose really is just to get some practice in on various and points.
So we've got the euro here and this is connecting two adjacent file also.
Just as always, just output the data within your Web browser if you're making a get request.
And that way you can see that this endpoint is open and that we're able to access it.
And you can also create local versions of these JSON files, so if you do if you are having problems
connecting to the endpoints, you can make the local versions of the JSON file.
And just toggling the word wrap so we can see the full Web you URL, so let's make our Futch request
to that you URL.
And I'll do that within a function.
So it's going to make a futch request to whatever the you are ellis' that we're sending in there and
I'll just call this you URL's and then eventually we can turn this into an array if we want to, making
the Thach request.
So, Futch, to whatever the you are, Ellis.
And then once the request is made, we get the response back and take the response as Jason.
And that's assuming that it is within adjacent formats, so as we saw last time, they might not all
be Jason.
So we have to be mindful of the fact that maybe returning it back as Jason, we might want to default
it as text.
And then when we see the data coming back, then we can just ensure that it is within a JSON format
and then also lets out in a catch for any of the errors as they're going to be trying at various Web
URLs.
So some might have some issues or errors and then we can debug the errors.
So make the request and copy it.
When the button gets clicked, then we're going to loop through the OR else.
Right now we just have the one URL.
And click it so ready and we're turning the content back.
So let's.
Created as a JavaScript object, so using the adjacent pass, that can turn the data.
Into Jason, our JavaScript object.
And let's see what that looks like.
So the data is going to stay the same, but we're just putting it so that looked like that worked.
We've got our array that we can loop through such the box array.
So let's update this parameter.
And will create an object out of that.
And within the object.
I'll have one value for property of you, Earl, and if you want a proper structure as JSON, you do
need to use the double quotes.
But because this is in JavaScript, I am using single quotes.
And for the.
Ouray.
The rain is going to be located at.
Books.
So that's going to be the path to the.
So select the first you, Earl.
And we'll just create temporary of you URL's zero one, and we're not going to send over the request
yet until we can make sure that our local data structure properly.
So it's in the temp and we've got the you are all there.
So let's send this data over to the Miralles.
And this is going to be returning back to object, so out of the object, we need to create a euro,
so it's going to be located within the might object euro property.
So make the Futch request to the my object you are.
And now we'll console, like the value of the.
Jason, and using the bracket notation and this is where the bracket notation is sometimes better because
it's provides more flexibility, so I can take them my object and I can use the array string value to
see what we like out here.
So within the array string, that's where we're outputting that.
And let me comment about some of this excess, so that gives us the array and allows us to locate the
array.
And we can dynamically track all of this within a.
An array and have that locally, so allowing the users to be able to loop through the various Web URLs.
And I'm also going to add one more value there.
And I'll just call it Booklist.
And we are going to be using that as we're going to be constructing the end points, using this object
and then sending it over, adding, though, that listeners to those end points.
So let's create another one.
Same structure and structure is really important when it comes to the JavaScript objects.
So let's select another endpoint.
And in this case, we'll use the end point for people.
And this can be something like a friends list or something like that, and we don't know what it is
yet, so we want to have an opportunity to still output the content from the Thach request.
So let's update the index value here to you, URL's one.
And then we'll also update you earlier that we're sending to you, so let's see what happens.
So we're going to fail because we're making a connection.
We're still returning it back as JavaScript object here.
But we do have a problem here where we're trying to get the array out.
So let's fix this and then so we can do our debugging here and then make that dynamic.
And let's take the end points and try it within the Web browser first, so this is what we're returning
back and the rate actually should be within data.
So we should be able to return that information back.
So let's see what's going wrong here or do some troubleshooting and debugging.
And comment about some of this excess, so this is what we're getting return back.
And it does look like it's it's a string value, so let's output the JSON object.
So it's having a problem parsing this as Jason, so if you do encounter this.
Double check to make sure that you've got on data that's valid, Jason, data, so it is valid.
Jason Data.
And let's just create a file of it and call it Jason for Jason.
So that will give us an opportunity to adjust that if needed.
Jason, for Jason and that's we're going to make the fach requestor.
So this one looks like it's a little bit difficult to troubleshoot as it doesn't make any sense that
we're not able to output it.
But when we create a Jason file, we are.
So that secret really is within the source code of the file.
So we go over to the one people died, Jason.
We look into the source and immediately we notice that this is going to be HTML content.
So it's not going to be presented as JSON content.
And that's a problem.
Even though the extension is JSON, there is an issue here.
So looking at the Web page and open up the source, the inspect elements, and then from here we can
see what the problem is, that it's got a lot of these character spaces for providing the structure.
And that's what we're not able to see that visibly.
But that's within the courts.
It's got all of these spaces here.
So we need to strip out these extra spaces from the string value and before we try to convert into the
JSON object and with a typical string, you can also notice as well that if this was a typical string,
there wouldn't be any of these spaces that we can convert it to JSON.
So this is already structured with the spaces.
And that's why when we copy it, it works.
When we paste it into the lint, it works.
But when we try to connect to the adjacent file online, it doesn't work because of those exact spaces.
So let's go back in and we're going to load that page content one more time and we want to strip out
the extra spaces from the string data.
So we're turning it back as text.
And outputting the text content, so that's our text content, so we have to remove it all of these
extra spaces that are currently within the text content.
In order to structure it as Jason.
So let's create a temporary holder for the data.
And then take that data and use replace.
So return to replace the spaces, which is blanks, so remove out all of that.
And let's see what we now we get return back in the value.
And even better than using the character for these hidden spaces, let's remove it out using a regular
expression so this will strip out all of the excess spaces, using the regular expression, and allow
us to clean the structure of the JSON file because we hear we don't see all of this extra data and when
we validated it restructures that properly.
So now we've removed out the excess white space.
From the data.
And now let's pass the value over and see what we get as Jason.
So now it works, we're able to use the JSON data.
And from here, able to loop through and iterate through the data, so we had to do a small cleaning
of the content before we're able to access and use the data.
So this actually isn't a good example because this structure isn't going to fit properly with what we're
trying to do.
And this is just an example of the different end points and some of the problems that you might encounter.
So if you do encounter this type of problem, look at the source code and check to see what could be
causing and what could be creating the proper JSON structure.
So let's try another endpoint.
And at this end, point has the same data, but we notice that we don't have the line space for formats
there.
So let's update this you URL.
And we'll try it going directly to the data content.
And now it works and this is going to look the same way as what we've got within our JSON file and we
don't have any of the spaces, so we don't have to worry about removing them.
And the reason that we're not going to use that particular endpoint is that if we have to remove all
of the spaces, we don't want to be removing our spaces in case some of the content has spaces.
Now, there's more complex, regular expressions that you could remove out that have just spaces outside
of the courts as well.
So you could look to some of those more complex, regular expressions.
But I did want to focus on troubleshooting and getting data from the endpoints within this course.
So we're not going to get too far into the regular expressions.
But there is a way and that's how you can troubleshoot and just make sure that your content, even though
it looks well within the Web, you all just take a second look and look at the source code and make
sure that the source code is clean.
And this way you can take the content and you can directly parse it out as JSON.
So if you do encounter any of those errors that we saw, that just means that the Jason that we're trying
to pass is not properly structured JSON.
So our array for this case is going to be the people.
And now we can make a more dynamic way to loop through the data, because at this point we know that
we've got people object and we can loop through the people array.
So let's see what we've got here.
And we can output the people array here, so this gives us an opportunity where we can change the index
values and we can update and output the array objects dynamically.
So let's add in one more end point that we can practice and then we'll dynamically output and generate
all of these endpoints.
So this is just going to be a cryptocurrency endpoints points and this is going to be are you, Earl?
So I want to make sure I get the structure proper.
So I'm going to copy and paste the URL and then I'll copy it into the New York URL for the list.
And.
And it looks like our initial array is going to be data, so we'll see what we return back here and
let's update the euro and also update it within the button event listener and click the button.
And it does look like we're able to get the content there for the different IDs.
So the structures.
Done properly, and it is within the data array, so status and this is the one that we want to loop
through.
We want to loop through the data array and output some of those values that are within the data array.
So now that we've got the ability to dynamically select by index value and select the object array,
we can pass through there and loop through there and output it onto the page.
So let's add that option and and this could be a function or give it a name of maker.
And it's going to take in an object value for the array.
So this is just simply going to be Pastan.
And then will console log the array and we'll do the array length just to make sure that we do have
an array.
And for each one to look through each one of the items in the array and put them in the page, so for
someone want to do is I put them into the console and then we'll put them onto the page.
So that gives us a listing of the items that we have.
There are going to also commentates some of these console messages.
So to avoid any of the confusion.
So that's going to focus on the array, so there we've got our length and we've got the array data,
so we want to ideally we want to just output and loop through all of the properties that we've got within
the object.
Now that we're returning back each item within the array and this is all dynamics, it doesn't matter
which end point we're connecting to the paths and the data is going to be all different, but we're
always looping through an array.
So we want to make it flexible enough that we can take this object and list out all of the property
names that we have here so we can do that with another for loop that's contained within the for each
loop.
And this one is going to just pull out the object contents.
So the object contents.
And we'll pull it out as an object of.
And we'll check for the entries that are within the object and console log the contents that we have
of the object, so let me comment that out and click.
And because this is an object, let's select the elements entries and using the object or object entries
so that we get returned back, so that gives us an array of each one of the property key and then the
value that's associated with the key.
And you can also separate this out as well.
And call it entries.
And depending on how you want to present the structure of your code so you can just do it like that
way as well, entries.
And if you want, you can also console log out what we've got for entries.
So when we do make that request.
We get that initial array of all of the items, so that means that we can then loop through does this
object and output the contents that are contained within the object.
And we don't actually have to loop through because the structure is always going to be the same.
So these are.
So the first item in the array is going to be the property name and then the second one is going to
be the value that's associated with it.
So let's take Output's.
And just clear out the current in our HTML.
And select the inner HTML and using the tactics for the template literals.
I'm selecting the object, which is an array and selecting the first item, and then the second item
is going to be the value.
So that's going to be the key and then that's going to be the value that's associated with it.
And then we'll just add to the HTML and create a line break between them.
So let's see what we've got now.
So it looks like we're able to output the content and we need to break between each one of those.
So also, let's create a diff to create some structure.
So using the document creates elements, create the div for the page and then output append, append
the newly created div to the page and then within the div we're going to update the entire HTML.
So that set the inner HTML.
And just do a property's count or something like that could take entries and get the length value of
entries.
You can also use the back text as well.
And actually, this isn't going to be output's going to be the diff and we're going to be updating the
div values that way.
So Properties is eight and.
See what we've got, so it's adding that new line and let's also separate out and add a class size and
class list, add a class to the diff and go to index.
And let's set up some parting.
And also border.
And so with so is 80, whatever you can set, whatever, what makes sense for you?
And then for margin as well, and then auto for right and left, so that centers, so this one is actually
still has an object within that object.
So you can also try to detect that.
But the purposes of this, we just want to demonstrate that we should be able to switch the index values
and that should return back and output the contents of the various points.
So it looks like everything is working properly and we can dynamically output the contents of the endpoints.
So let's do one final thing where we're going to loop through all of the Urals on the page and then
create buttons for those.
So you URLs for each.
And it's going to be for each one of the elements, so let's update them and add them to the page.
So creating a button.
And I'll call it button one, using the document, create elements and creating the element is going
to be a button and then clicking these buttons.
It's going to launch into the you are all there and I'll use the will select each one.
And we'll populate the content in their.
You can also create another element to output content, too.
So just to save some time, I'll select the each one and each one, append each one of these buttons
to the page.
So there's our buttons.
We need to have some content on the button.
So it's in the console.
I'm going to output the contents.
And thus, remember, this is coming from are you URLs?
So we're updating and outputting the Urals.
So each one of them has by default, it has a title.
So we can use that as the content of the button.
So take the button one text content, and we'll equal that to the Element title.
So there's our buttons and let's make the buttons clickable.
And also clear out the inner turmoil of each one so we don't have that Jason value there.
And that we can do as soon as we select each one, so that way we just have the buttons up here, we've
added the title and now we want to make the button active.
So an event listener to the button.
And whenever the button gets clicked, then we want to launch and launch to the mike, you are sending
over the object information and we're going to also have the you are all here within the element object.
So launch the euro.
And actually, this just requires the full element to object.
So let's see what happens.
We click the buttons and we can dynamically load to the different end points and I'll update the connection
before we send it over to the maker.
And from here, we can just use the euro that we connected to.
So that will load the endpoints there.
And then the data from the end points below.
Now, let's do one quick more update to the button.
So to make the buttons a little bit more like buttons, a bigger updating the font size.
And at some margin between the buttons, the five picks, and I'll add to each one of those buttons
that we're creating and as we're looping through the buttons.
Had a class of button and that turned out a little bit too big or bigger than I expected.
So now we've got clickable buttons.
I'm also going to update the border radius so slightly rounded.
For the buttons and there we go.
So now it's up to you to make updates as needed on the page.
The objective of this lesson is to practice so there are some tasks that you should try it to dynamically
load content from different JSON data and different Web pages and also troubleshooting debugging of
the JSON data to make sure that your structure is proper and then outputting that content onto the page.
Try it and check out the various data and error messages debugging within the console and then also
using a LENTE option and then load the various data points and put the content on the page.