So this lesson we're going to be making a connection to a simple end point, and that end point is just
over here.
So this is just a regular JSON file.
And taking a look at it, you can see that it's an array and it's got a bunch of objects that are,
comma, separated within the array.
So we want to iterate through the contents of the array and output, the name, the location and the
age on the page.
One of the button is clicked.
So this is just outputting content from that web end point and outputting it to our webpage whenever
we click the button.
So it makes the request to the JSON data and then uses it within the JavaScript.
Go ahead, open up the Ed, I've created a basic HTML shell, so we've got our HTML tags opening closing
had we're going to do the styling within the page if we do add some styling and we've got some elements
for the page.
So in each one, an input area, a button so that we can add event listeners and output elements.
So just a div with output and we're also linking to our OP1 J.S. file.
So we're ready to start coding this project.
So go ahead and open up the app.
One guess.
And in this case we are going to be connecting to a very simple JSON and then outputting the data.
So it's going to be a list of people.
They're going to have locations, ages and some basic information about the people.
So you can also recreate the adjacent file as well.
So just see that and create a brand new JSON file.
So if you're not able to connect to the API for whatever reason or if you're just working locally with
no Internet connection, then you can go ahead and create a local version of the JSON file.
So JSON file itself is going to be an array and the actual location of the JSON file.
We can take a look at it on the Web and this is going to be located are going to share this address.
So the Web URL is Discovery VIPR dot com for its I share it for its test one JSON and it's producing
some test data and the basic structure of the data.
So it's always a good idea.
Before you try to output the data or work with the data, take a look at the data structure and see
what information so you can tell right away that this is going to be an array and it's going to have
a number of objects within the array.
You can also use the JSON lint website to copy and paste the JSON data so that it's more readable and
also make sure that it is valid.
JSON data and also within the JSON Lent, you can open and close the various objects that are in the
array.
So again, making it a lot easier to read as you're going to need this information when you connect
to the Web API.
So select the endpoint and let's create a variable and that actually should be in the JavaScript file,
not in an adjacent file.
So let's collect to the endpoint and just give it an object, a variable name of you, a toggle, the
Wardrop, so you can see the full Web URL.
And also what I'm going to do is I'm going to copy and paste JSON data into people JSON and save that
so that we actually have two ways to get to the file and maybe we'll have one called local U URL and
that's going to link over to people JSON Dotcom.
So next up, we want to create some interactions on the button.
So whenever the button gets clicked, then we're going to search the Web API or the JSON file and then
so that we can initiate returning the data.
So we need to select the button object from the page.
And you can do that by selecting the button and element with a class of button.
So using the document.
And query selector, select the element with the class of BTN and we're going to make that clickable
and then also we want to have an area within that HTML that we can output some content into.
So it's going to be the element with a class of output.
And let's add the event listener to the button so that when it gets clicked, we invoke the event and
this event.
What it's going to do is it's going to make the Thach request to the euro and load the data into output.
So making the Futch request to the euro and we'll also try it with the local JSON file.
So returning back the promise for the response object and returning back the response content, and
this is coming back as JSON object and sometimes you see it within the endpoints.
If you do open them up within the Web browser, if it's all just one line of code that's being returned
back generally as a text file.
So in that case, then you need to get it as text.
You're not going to be able to translate it directly as a JavaScript object and you could pass through
that string value and output it as a JavaScript object.
And that, of course, makes it usable within your code.
So then we've got our JSON data that's being returned and for now we're going to output it into the
console.
So just to make sure that everything the request was being made properly.
So click the button and we're getting back undefined.
So let's try the local euro.
And again, we are getting back undefined.
So can you spot what the issue is?
Let's try adding in catch and see if we can select and grab the error and then console log the error
details.
And with catch, this is only going to work whenever there's a problem with the Web URL.
So if you're still seeing the undefined, that means that this value for JSON, this is just coming
back as undefined.
There's no value that's being returned back here.
So let's look at within our fetch request.
And it's not having a problem connecting to the local U.
URL or to the Web URL.
So the next step is to debug it and take a look at this error message.
And we do still have undefined it just has an undefined value for JSON.
So we haven't set a value for JSON and we're getting this value for JSON is whatever is being returned
back from the initial promise when we're making the request.
And the problem here is within this code is that I added in the curly brackets.
So by default, if we just do it this way, within one line, we are able to make the request.
And also if I add in the curly brackets back in to the function, it's actually not going to work now.
And the reason is that that initial.
Promise makes a return of the content, so it was a syntax error that I had removed out the curly brackets
and that removed out the return of the JSON data.
And that's why within the JSON variable, we were returning back undefined because there is nothing
there.
So now when we fix that and we add in the return, we can see that we have access to the data.
So that was a little bit of quick troubleshooting.
And with making these fetch requests, you can encounter any number of errors or issues.
So this is something to keep in mind when you are having problems with the web.
You URL usually with the catch, you're able to catch it.
So if I was to do something where I've got the Web URL and let's say this Web URL doesn't actually work,
that's what we're going to get the cash and be able to catch any of the errors.
And then we also get, of course, the error message that it's not able to find the Web URL.
So do you get information about the connection if there is trouble making the connection with the Thach
request within the cache, but if it's an error within their own variables that you have within the
promises, you're not going to see no such error because there wasn't an error.
It was just that the value for JSON was just undefined.
There was no value that was being returned back.
So now that we're able to return content into the console, that means that we can also go through and
loop through the content and output it on the page.
So let's create a new function, we'll call it maker, it's going to require a data array to be passed
and and once that data array gets passed and then we're going to loop through the data object.
So use for each to loop through each one of the items within the array and then return it back as an
element within the for each method.
And so for now, what we can do is will console log out the elements and I'll just shorten it to L so
try that one more time.
So now we've got the name and all of the information.
And then again, it is really important that each one of the items within the array has the same content
structure.
Otherwise you're going to run into problems with the output.
So let's clear the output.
So set the inner HTML of output.
And just call it JSON data or whatever, we're just really clearing out the entire HTML, so we're reassigning
a value to the entire HTML and which will effectively clear out any existing data.
And so that means that as we loop through, we can update the entire HTML that exists within that element.
And I'm using the back text and we'll loop through each one of them.
And for now, while Jason string of file the contents of L, so do a click on it so it returns back
to the JSON data within a string of IDE format and we can also be more specific with the content here.
So I just commented that part and we want to get the first name, the last name of the person within
the array.
So using the URL and we have to go into the name object and from there the property names are first
and last and we can return them accordingly.
So let's just use the dot notation for first name and then add to it last name.
And so now that should output the first name and the last name on the page.
Let's wrap it within a div so it gets on a new line for each one and try that one more time.
So we're outputting the data and we can add in location as well.
So let's create a new line of code that's going to then also add to the location.
And whatever the city is, and then also location country, and let's output that information to the
page, so that will be just a new line up and it looks like there was an error there that was just a
spelling mistake.
So it put the URL instead of the T. So let's try that one more time and use the console debugger to
debug any issues you might have.
So we've got the location and let's output one more and we're going to add the age to the list.
So and then this is just on the route.
So this one's a really easy one to add.
And just to separate, all of the people will add in and each horizontal rule.
So that outputs the people the list of the people to the page and connected to the JSON object.
And then as well, we can also select the other elements.
So let's go ahead and hide the input so const
and using the documents.
So make it look nice and select those elements and we'll update the style properties of it and update
display.
So that will remove out and that actually should be style.
And let's also update the button text.
So text content of the button.
So load Jason data.
So there we go.
So we're outputting the content to the page coming from currently from the Web you URL, and then you
can also swap this to the local you URL as well and within the catch so you can make a second request
that is going to update the Web you URL so we can create a function.
And we'll just call this getData and I'll have your URL.
So call this your URL path and we'll make the Futch request to the Eurail path, and that way we can
simplify this function where first we'll try the Web, you URL.
And if we do encounter any errors or issues to it, then we can run the get data with the local URL.
So that way, either way, we're going to load some data.
And we should also add in failsafe and we'll just have the attempt counter, and I say this to false,
so before we try it, so we'll only have the one attempt at the local.
And so let's set it to true and within here, we'll have the condition that if there is no attempt to
counter if it's false, then that's what we're going to make the request to the local data and then
we're setting the value to.
True.
So at that point, we're going to try at one time to make a request to the local data.
So let's update the website URL to the incorrect path.
And so now what happened here is that we're able to catch the error.
So we were able weren't able to load to the Web URL, but the application continued and then it loaded
into local.
So the reason that I added an attempt counter and the condition was that this way, if we are missing
the local file by whatever reason, then we're not going to keep trying to make the fach requests.
Otherwise we're going to keep trying to make the factual requests using the get data path and we'll
continuously try to get to the local path, which isn't going to work out too well.
So you can add that in as well as a failsafe.
So if you do have any problems with loading the data or if the path is incorrect, then you can always
revert back to the local data.
So let's apply some styling and go over to Google thoughts.
Let's update and select nice font that we can use and we can import the font into our styling and then
use the font within the output area.
And actually I'm going to use it within the entire body element.
So let's go back and refresh.
And let's center the content and add some padding, so that looks like now we've got our Jason being
loaded there.
Let's set up alternating roll colors within the JavaScript, and this is, of course, optional.
So as we loop through each one of the elements, I to get the index value of the elements and will I
put the index value so the index is zero one two.
So with the index value, we can check to see if it's odd or even.
So let's set a background color using a territory operator and checking index and using the modulus.
So checking to get a remainder and I'll output this value into the console.
And if it is equal to zero, then let's set the color to this.
Otherwise we set the color just to wait.
So either way, we're going to be producing a background color and adding in one more div style and
set the background to whatever value we have for Biji and then we'll close off the diff, the parent
operative.
And it does look like something went wrong there.
So let's save that again and check what we've got for the element content.
And I did forget one quote there, so that's why that wasn't working.
And what it's doing is it's actually automatically adjusting and closing the device.
So we don't necessarily want that.
So let's add this into a parent div and then we're going to spend the div to that output page.
So let's create a separate div and using that document to create elements and selecting the creating
and elements and then within the div so its style and then the background color can be equal to whatever
we've got for background.
And we can even simplify this even more if we want to, by just assigning the value as a territory operator.
And now within the Divx, the inner HTML, they can set the inner HTML of the div.
And then lastly, we'll just add the div to the output page so we'll append the content and then take
output, append the newly created diff to the page and let's see what that looks like.
So now we've got our alternating colors.
So that's an option.
You don't have to add that in, of course.
So that was just to apply some styling so that the data that's coming out is more readable.
And then, of course, you can adjust the colors as needed as well.
So go ahead, try it out and make a connection to the web endpoint.
You can use the same one that I used and then also create a local version of the file.
And once you do that, then make some connections and output it on the page using Ajax.
Thanks for this lesson, are to make an Ajax request to the Web, your URL also create a local version
of the JSON data that's going to be stored locally so that you can connect to it and add in catch into
your fetch request to ensure that if the Web URL data does not load or the Web you URL does not translate
properly, that you can use the data that's locally stored than the JSON file and still have some output
for the page.
And then last and finally output all of the content from the JSON object onto your web page and you
can apply some staling and make it look nice.