This lesson, we're going to be making a GitHub API connection, a little mini application.
And first off, it's going to be loading one of the GitHub Zen quotes, so it's coming from API, GitHub,
Dotcom, Zen.
So every time we refresh the page, we get a nice new Zen quote.
And then we can also search the repositories for whatever value we want for want something called test
test or let's do test JavaScript.
Let's see what gets returned back.
So there's our request and that's going to return back something like this.
So really massive JSON object that's got multiple items within the array.
And what we're doing is we're taking the contents of that JSON object and we're extracting the information
that we want and the property values that we want.
And then we're outputting some of them on the page.
We're also going to be connecting just to the one repoll and outputting that on the page as well.
So it's going to be a nice flexible application that allows you to search the GitHub repositories,
provide the URL and also some information about the name, also the IDs for the owner and for the repository,
and then a link to the repository itself.
And this is an open API.
It's a good way to practice and become more familiar with what you can do with JavaScript and fetch
and then also return back some of the content to the page code and create a brand new JavaScript file.
And we're going to be linking to the same HTML file.
So using new JavaScript file and is going to call it pro to dot G.S..
So creating the new file and then save that file as a prototype G.S..
So this is for our second project.
We're going to dive deeper into fetch and how fetch works and how we can change together fetched promises
as we continue to practice writing JavaScript code and making fetch requests and returning back data.
So within each HTML file, first of all, let's set up our container's so selecting the elements output
and using the query selector, let's go ahead and select the element with a class of output so that
we have somewhere where we can write content into and then also will select the button object using
that button query selector, select the element with a class of button so that we have access to both
of those page elements.
I'm also going to toggle the word wrap.
So some of the text there within the code editor was going off to the right hand side, so toggling
the view.
So it wraps the code so that we can better see it as we're developing it.
So adding in the event listener to the button one.
So add an event, listener and event that we're listening for is going to be a click.
So whenever that button gets clicked, then we want to do something.
And this is where we want to create our fetch request.
And the way that fetch works is that the French method requires you URL.
So in this case we'll still work with a local file and will create a local JSON file and then we'll
connect to a Web API with a similar type JSON file.
So starting and let's just save this as proto, Jason, so that we're linking to from the JavaScript
file to the JSON and within here, let's create an object.
And then this object might have some information like an ID, so this can be a number and then comma
separated out.
So this can also maybe have a name as well, trust content.
And there might be a more complex object here.
So an object within an object.
So it doesn't always have to be an array.
Sometimes the objects can be several deep.
So within this owner, there might also be an account for an ID.
So each one of the owners has an ID as well as there's an ID for the item that we're fetching.
And then this can also be just a No.
And let's add in one more item here.
So this this is just going to be whatever the language is, and let's say that the language to be JavaScript.
So a very simple object that we're going to connect to and connect to that using the JavaScript and
fetch and we'll walk you through exactly what's going to happen with the Fach.
So we're Neeta you are able to connect to and that's going to be that JSON file that we just created.
And that's on the same directory, so it's we can just simply connect to that Jason file.
And so when we click the button, we're going to encode our fetch and fetch to a Web URL.
So we need the one parameter and that's passing in the early.
And this is the resource that we want to fetch.
So whether it's a file locally or a Web file, they're both going to work the same way.
And after that, once we make the Thach request, then we can select and use them and as fetches promised
space then is allowed to be chained together so we can have multiple methods chained together.
And that's just going to be the first request.
Once that completes, then it's going to move on to the next method.
And that's where we can chain together multiple thens.
And this is all part of promises and JavaScript and the way promises work, is there a feature of asynchronous
operations?
So whenever one gets met, then it moves on to the other one.
And the promises, once the connection is made to the server, it sends the information back.
And once the promise resolves, it's going to move on to the next function that's chained together.
So in this case, we're returning back a response back.
So this is just going to be our response object.
And with that response object, we can return it back.
And then the last lesson we saw how we can return back text and we can also use the JSON method in order
to return back, Jason.
So you might also see it and see Fach being written like this with multiple promises.
So it's depending on how you want to read it.
And then once this promise is met, then it's going to move to the next chained promise.
And this is going to be where we're returning back the data and that's going to be captured as a variable
name called data, and then whatever we want to do to it.
So we have the opportunity to run through the content and output the data.
And usually this is going to be my starting point where when I do make the fetch request, I want to
make sure that I have the opportunity to log the data into the console.
So let's try that.
And there's our data and this is coming from the local JSON file and it's JSON object.
And then we can retrieve the data that's contained within that object.
So, again, the first line says to fetch the resource located at whatever the URL is and then runs
the function which the promise resolves, and that means that whenever the finished performing the specified
operation, which could be at a future point.
So once it makes that connection, whenever it finishes, then it moves on to the next promise.
And effectively, the then passes in a chunk of code that will not run immediately, so this block of
code will just gets passed into the promise and it waits its turn a waits in the line between the different
promises to execute the code.
And in order to handle errors, you can add in another promise afterwards so we can do a promise where
we're catching and this will get invoked if there are any errors that are passed.
So this could be whatever error message or something like that that we want to see what happened with
the Thach.
If the Fed's request didn't work out right.
We're going to return back to error and we can take that error.
And for now, what we'll do is we're just going to log it into the console.
And we can just say Futch problem and then whatever the error message is going to be so concatenated
together and error and it's going to return back JSON object.
So error message and we can capture that within the console log if we do have any errors.
So let's say, for instance, we are fetching two adjacent file that doesn't exist or JSON object,
then this is where the promise kicks in.
And we see the error messages being output there, so we get the fetch problem and unexpected token.
At that position, because it's not able to find the location of the file and if we update it, you
can see that that also updates that output there, that now we've got the call.
So it is catching the error and it is making and updating the value.
Within the console.
And we can also get the whole air object, and usually it's a lot more clear if we just deal with the
error message, if we customize that.
So let's remove out the error in the code.
And also notice that we're not doing the catch anymore, that we're just simply getting and returning
back to the adjacent object.
So let's make a connection to Web API.
And GitHub has a number of open APIs, so it's relatively easy to make a connection to it.
And the structure of the GitHub endpoint point is going to be the same as what we've got within our
JSON file.
So it's going to be fairly easy to select that Web URL and just swap it out and let's make a connection
to that.
And now we're returning back the Web API.
And as you can see, there's a lot of data that gets returned back here.
So let's output some of that content onto the page.
So once we meet and we get the promise, let's create a function and this function output content to
page and it's going to take in the data object and we're going to base this data object on what we're
retrieving back here from the GitHub repository.
So we've got the language object information.
We've got the owner ID the name, so let's output that information.
And now this is going to be contained within the data.
You can also console log it out just to make sure that you did pick it up properly.
And also, if you want to construct some HTML object to output, you can use the template literals.
These are the tactics to the left of the one key on most keyboards.
So taking data and name.
So that will output the HTML and then we can take the output and update the inner turmoil of the output
object and just assign that HTML to it.
And of course, we need to run this function, so whenever the promise has been met and we do have data,
we're running the function and are turning back the name.
So the name is going to correspond with the name here.
We can also get the ID.
And also let's try to do one more where we're going to go into the owner object and return back the
ID from the owner object.
You can either use the dot notation or bracket notation so either one will work the same way.
So this is optional up to you how you want to handle that.
Sometimes the bracket notation is a little bit easier to read and of course the annotations more flexible.
But either way, it's going to output that same content onto the page.
We can have information, so I'm just going to add in a line break.
And with the template literals, you can move to the next line and I'll actually I'll put it on the
next line.
So let's go back into here and see what we have.
Can I put the ID value?
And next up, let's select the owner object.
So that is the owner.
And as well, you can use single or double quotes within the bracket notation.
So in order to retrieve back the ID within the owner.
And let's just make sure that it is working, and if we want to have proper TML, let's put the line
breaks there so it separates out the content.
So it's returning back the appropriate and corresponding details.
And then lastly, let's also get language.
And I was just checking to make sure that it's going to be consistent with our local file so we can
swap it to the local and then also we can swap it to the GitHub repository.
So that's the.
And there's language over there.
And it doesn't have it, that's what it was during the undefined because it was looking for the more
complex object.
So there it's returning back the content and as well.
Let's update the euro and we'll just use whatever the local you are.
So that was the approach to Jason file.
And it should also work as well as the structure.
It's the most important thing about JSON object is being able to read the structure and then make use
of the structures.
You're able to associate the property names and get the corresponding value and return that information.
Within the GitHub, there's also the repos.
So this is a more complex request, and this one is going to return back an array of items and the rays
are indicated with square brackets at the top, whereas this one is just returning back an object.
This one is returning back injury first.
So let's update the euro.
And we'll just update the euro value, so returning back the array of repos and we'll make the Thach
request and then this is going to be output array and will update this function to output the array
of content.
So output array that we can use that as data.
So let's see what we get output there and we're capturing 10 different reports, so ideally what we
want to do is loop through each one of those and we can pull back the information the same way that
we were pulling the information back from this object so we can just output it to the page instead of
updating.
We're just going to concatenate the HTML.
So let's loop through the data and go for each.
So looping through each one of the pieces of data, we're turning it back as an element.
And then that element is going to be the data object that we're going to output and load to the page.
So let's see how that looks.
So go back in and refresh it, so there's all of our data objects and in order to separate it as we're
looping through and concatenating to the page, I'm going to add in horizontal rule.
So that way we can have a separation of each one of the repositories.
And even though these are more complex, once you recognize that is an array of the same items and we've
already worked through working through the single item single repository, we can loop through multiple
repositories and return back the content onto the page.
So let's do one more where we can do a search of the repositories and there's more information about
the GitHub repo at Docs dot github dot com.
That gives you more information about how you can make the requests.
And select the various reports, so selecting and using the you are a component to encode it because
this is going to be a request.
So it's just like a Web request.
You want to do the you are a component to encode it and that will do the quarter to deconstruct and
construct the query strings.
And this gives you the limitations, errors.
This is an example of how you can do the search code.
Into the query, so it's doing a search for the code into the query, so let's add that in and update
that to the Repos.
So I'm just copying through the query string and that's actually going to be to search the repositories.
So the number of options of different paths that you can search and update this to search the repositories,
notice that it does have a question mark in a query.
So it is expecting a returned result there.
And we want to make the Thach request and output the contents that we've got here within the repositories.
And the structure for the returned results is going to be the same where we've got the ID, we've got
a name owner with its ID and then as well it's got the language.
And of course there's a ton of information here.
So you can even add in the euro as well.
So the HTML, URL, wherever we've got the repository that we're doing the search for.
So however you want and it is this good practice to take some of this content and put it on the page.
So let's go back in and we're going to construct the query is the search query, so do a refresh.
And what happened here is that we're not able to process it.
So it's validation error and it's being whatever the error messages that's being returned back from
the endpoint.
So the data fetch is not a function because we don't have an object to loop through because we didn't
get any content back.
So let's go ahead and we'll add one more item into the page.
So do an input and set the type to text.
And this will be whatever the search term is that we want to do.
And we only got the one input.
We can give it a class.
And call it a search term so that we can select it and going back into the JavaScript.
Well, set up an object called search term document and query selector, select the element with a class
of search term.
So select that object and then we can get whatever the value is, whatever the button gets clicked,
then this is going to be the search term.
So we need to take the user out and we need to construct the search term.
And using that and code, you are a component.
And what this will do is if there's spaces, then it will update an account for the spaces and I'll
output the query string before and after.
So setting up variable value and we can also just call it the query string or whatever.
And within here, let's assign the value of whatever we've got for you, Earl, and then concatenate
to that the question mark.
And what we're going to do is we're going to do a search query.
So just as we have within the Web browser, so we've got Q equals and then this is where we're going
to use the component and taking the whatever the current value is of the search term value.
So that's going to get the input value of that input field.
And that way we'll add it in.
And that will construct our query string, let's log that out into the console.
So log that value and then this is also going to be the new euro that we're sending the request.
So let's try that.
So now we've got a click me query string.
It's making the request.
It provides us what the total that's being returned back and it's got it within an object called items.
So let's make a quick adjustment where we've got the data that's coming back and this is it in an array
of items.
So we want to make sure that we're sending the array over that we want to loop through.
And let's like this, actually, we're going to update this and we'll send it to another function so
we don't have to.
We'll just call it output Arae to.
And we're not going to try to loop through it yet.
I would put the content and this is what we've got.
So we want to take a look at the items.
So only items is what we want to look at, and there's a every.
So at this point we're ready to loop through them and they should have the same structure as the output
to content so we can loop through each one of the items and we'll just check to see if data items.
Length is greater than zero, and if it is so, we know that we're good to loop through.
And loop through the data items array and output that content to the page, so there's our list of items
and it doesn't look like the language is contained within this object.
So in some cases, there might be slight variations.
So maybe we want to look at HTML you or something like that.
And let's try that one more time, so make sure that we're able to put the content onto that getup.
So there we go.
So we've got all of the content loading.
And also before we conclude, GitHub also has ZENN quote.
So this is a really easy one.
That is just a Web URL.
It just returns back a simple Zend message.
So I want to add that in whatever the page loads and update the JavaScript to the Zen message.
So let's do that quickly before we conclude and we'll just create a window add event listener.
So we're listening for Dom
content loaded and so it's going to fire off the event whenever the DOM content loads.
And for now I'll just type in ready and then we'll make a fetch request and we'll get the Zen quote
once it's working.
So let's update the H1.
So using the documents, query selector, select the H1 element and then we're going to update the each
one element with whatever the text content is that's being returned back from the Web API.
So this will be the value that we're looking for.
So we need to make Fach request and then update the content so Futch and the URL that we're fetching
to and then once we return it back.
So this is just going to be a response object and this is just going to be returned back as a response
text.
And China, together with DOT, and then the last promise is whenever we get the message back and then
what do we want to do with the message, we want to put it to the page.
So we'll take that value, take the value of message and put it to the page.
So whenever the page loads that we're going to have a nice Zen message instead of the JavaScript, we
can do our search within the console.
If there are some values, it's going to return those back.
And you can also update this to have a trough so it can hyperlink to wherever the location is.
And then would the path name and then closer of.
So that gives us a direct link to the repository, and that's all coming in dynamically.
And if we do something like test, test, what's going to happen here is that we're doing the urine
and coding.
So let's double check and output the message, we're putting the message into the console.
And let's go up and we see that this is the.
You are a component and coated version of it, of the test test.
And I do need to break out of that, so we run the JavaScript encoding.
Of the value and just save that, so that was a quick debugging just to make sure that it is working.
So if we look for test test, it's going to do the encoding of it.
So it's in the instead of the space, it uses the percentage 20 in order to do the search.
And then what's going to happen here is that every time we make a request, we're going to load a new
set of values into onto the page.
Hey, this lesson is going to be all about practice, so created JSON file that you can make a request
to output the contents of that JSON file so you can make it fairly simple and straightforward.
Have the ID, the name.
The owner can be an object with one item within that object and that can be ID and then language return
the content.
So put it to the page, then make a fetch request to the GitHub repo with the same structure, return
that content to the page, connect to the repos where you're going to get an array of items coming back
and then loop through those, iterate through those and put those to the page.
And then lastly, update your application to include an input field where you can make the user can
come in and you can fill out the input field, they can click the button and that will make a request
with the search query to the GitHub repo and get all of the information back from the API and then output
those results to the page.