Welcome Star Wars fans.
Today, we're going to be looking at in this lesson connecting to a Star Wars API.
So this API is rich in data and it's a really good practice API that you can return back details and
then make requests, additional requests to get even more information from the Jaeson data that's being
returned back.
So in this lesson, we're going to be building out the first part of the application where we're going
to connect to the API and we're going to build all of the categories.
So these are building the different end points and listing out the contents of those endpoints.
So it's loosening up those first 10 items that are available so we can go under under films, species,
vehicles, starships, planets, people.
And then when you click those, you get additional details about the selection.
So we're putting all of the JSON data.
And if it is an object or an array, then we're outputting the contents as a string of value into the
visual area for the user.
So we need to still add some styling and make some additional tweaks and updates because there's a lot
of data that's coming back.
So that's going to be coming in the upcoming lesson.
But this lesson we're setting up, the basic structure of the application start by opening up and creating
the index file, the indexed HTML file.
So this is just the standard template that we've been using in the previous lessons as well.
So with a head and then the body and within the body, there's a few HTML elements so that each one,
the input, the button and a div in order that we can output and produce the output for the user when
they create the interaction, clicking the button and for the JavaScript, so its linking to create
jobs.
And then here we're selecting the four elements from the page and on the button we've added in click
event.
So listening for a click event on the button and then that outputs ready into the console.
So that means that we're ready to go and to introduce and connect to the API.
So going over to swap dot dev.
So this is where you can find the Star Wars API.
So short for Star Wars API Dev.
And this is an excellent practice resource where you can connect and get some really interesting and
cool Star Wars data back from the API.
And there's a number of endpoints for this API.
So you can get people, you can get planets, you can get starship's and this gives you a sample of
the result that is returned back.
So we are going to be connecting to this API and returning back content from the API.
So the base root of the API is swapping Dev for API.
So lets just select that and you can also open that up in a new tab.
So you can see they've got a testing API area here and you can see the information that's being returned
back.
So they basically give you a listing of all the endpoints.
So we're going to go through all of these endpoints and return back the content at these endpoints.
So that's the first Yooralla that we're connecting to.
And I just call it mean your URL and add that into our JavaScript code so that we have it on hand and
we can connect to the other APIs afterwards.
So once we make the initial load of the page content, we want to load all of the APIs.
So let's add in our window objects and add event listener.
And this event listener is going to be listening for DOM content loaded and whatever the DOM content
is loaded and the event is going to fire off.
And this is where we're going to update our Don our DOM elements on the page.
So let's put it into the console and make sure that we're capturing that properly so we should see it
whenever the DOM content is loaded, that we get the message ready and so that we have a unique message.
Let's put Dom ready.
And this is similar to if you're familiar with query that the document ready object.
So basically the window dom content loaded fires off whenever the DOM elements are loaded.
And that means that we're ready to interact with the DOM page.
And if we want to load additional content onto the page, then this is where we can do that.
So now that we've loaded that, we want to make a request to the main URL.
So let's set up and create our fetch request to the mean.
You are all so Futch and then the path that we're connecting to.
So that's under the mean you url and using then and get the response object back and then we want to
return the response object and hopefully it s an adjacent format.
So we're turning it back as a JSON object or JavaScript object.
And then we can change together the next promise, and this is where we've actually got the jigsaw and
data in a usable format, so let's put that into the console.
We'll take a look at the JSON data and then break it apart and then see how we can add it to our page.
So these are all the different end points.
They've got films, people, planets, species, starships and vehicles.
So we want to live through all of those and put them on the page.
So the property name is the one that we want to display.
And then when it gets clicked, then we want to load the.
You are accordingly, so we need to break apart and take apart the object, and we saw that in the previous
lesson, that we can loop through the object data and get all of the object information onto the page.
Now, in order to do that, we can use the for instatement, which iterates over all the properties
of an object that are keyed by strings and ignores the key by symbols, including inherited.
So basically, if this is the object we can loop through and we can get the property name and then using
the object and bracket notation, we can return back the property contents of that object.
So now that we've got the object and we're outputting it as property so we can see that we're outputting
it within the adjacent variable, putting it to the page, and that's our object.
So we can use the for in statement and set up whatever the property is in, whatever the object name
is, and iterate through all of that content and then using the console log and they're using template
literal there in that example.
So they're outputting the property and also then they're outputting the object.
So using whatever the object is and bracket notation.
With the property name and that said, I would put the value into the console, so let's see what happened.
So we see we've got the people and then we've got the path to where the property name is.
So we're putting into the console and we can just as easily output it onto the page.
So how about we create a new element on the page?
Or we can update the H1 and list out a bunch of buttons there so that when those buttons are clicked
that it will provide the user the list of property options.
So selecting the each one element and typically this isn't ideal, but there's a number of ways that
you can produce this.
So you can do that with the output.
And then we also need an area for outputting content.
So I'm not going to use the output.
I am going to use the each one.
But this is optional and you can update your HTML as needed.
So as we're looping through, let's create a div or actually this is going to be a button and a use
button there.
So I just rename that to button one, so we're creating a brand new button and then document create
elements and the element that we're creating is going to be a button and then for that button adding
and text content of the button.
So this is going to be equal to whatever the property value was.
And then from the button, let's take the each one and append the button, object to the each one.
And just before we do that will clear out the contents of the inner HTML of each one.
So don't want to have any excess content there.
And I do need to wrap this with biotech's.
So that gives us our buttons.
And when the buttons get clicked, then we want to make a futch request and return back the results
on the page.
So let's add that in as well.
So adding in the button and we might also want to add a little bit of styling to the button.
I was either at the end, so adding in some padding
and a border.
And border radius so slightly rounded on the buttons.
And make the font size bigger and add that class to the button object that we just created using the
class list and add.
So add the class to the buttons, so nice and big, also, let's add in the margin.
And the reason they're so big is because they're already sitting within each one, so maybe we actually
want to make them smaller.
So they're already getting properties from the H1.
And I usually like to transform the text, so just transform it all to uppercase and then for the buttons
itself.
I didn't hover effect, so whenever they get hovered.
And that will update obesity and also let's update the cursor to a pointer for the button.
So we've got the buttons and now we want to make the buttons clickable.
So we go back to JavaScript in order to do that.
And within the button, so the button object, let's add an event listener and the event that we're
listening for is a click.
So whenever it gets clicked, then it's going to be getting the data and we'll just keep the function
like that and add in the get the data method or function.
And we're only going to be passing in the event object and then using the console log to log the event
target.
So what this is going to be doing is this is going to be picking up the element that initiated that
event.
And I'll show you how we can pass through the Urals within the object, the element that got clicked.
So within the button, we're going to set up your URL and just make it a unique property name, because
the button itself is an object and we're able to add properties to that object and then we pick up the
same object using the target.
And that way we can reference back and get the URL from the property.
And that's going to be contained within the adjacent property.
And we can also get rid of the tactics here as well.
So since we're referencing this button, it's got this, you are all hidden and that's the value that
we've got there.
So that's how we can set up and get the elements that targeted at.
And if we use the console log and reference the elements, then we can get that property value back
from within the element.
So there we've got the elements and whatever it gets clicked, we're passing through the correct path.
So that means that we can use that and output that content onto the page.
So let's try that as well, where we're going to just output and make a feature request.
And I'll just call it Get Jason and what we need here is a URL to get the Jason from Sumika vets request
to the endpoint that you are ill and then we get the response object and return back the response object
as Jason Then the next promises where we get the data and then within the data, we're just going to
log it out to the console right now.
And then we'll decide what we want to do with it afterwards, so comment database and update this to
get Jason.
So we're passing in the euro that's being defined over here to the button object properties of Earl
Z, and that's picking up that value.
And then we're just re picking that back up within the getData.
So when we click the button that returns back the count of values and returns back results are array
and then also gives us a total here so we can loop through and they're all going to return back within
the same structure where they've got the results and all the results are going to have different property
names.
So what we want to do is we want to output the results on the page and then have those clickable so
that the user can interact with those and take a closer look at the content that's contained within
those.
And it also does have the next page, so it's got page two so we can passionate the content, moved
to the next page of the content.
So we'll be setting that up as well.
Once we return back the content as data, then we can create another function and this function will
build the page and we're going to return back and retrieve the data.
So passing into build data as the next step.
And then what we want to do is we want to iterate through the contents.
In addition, we want to add in, if there's additional pages, add those page values down below as
well.
So let's put the data into the console and then we'll break apart the structure of the JSON object and
get it in a usable format.
And I'm also going to remove out some of the console content as we don't need all of this information
here.
So just comment about some of it and we want to load, so when the button gets clicked, we want to
load all of this information and we also get an indication of how many pages there are by the count.
And also there's next page and previous page.
So we want to build out the page options to go to the different pages, but we also want to iterate
through the results and create them in the output area.
So let's do that first, where we're going to take the data and the results and iterate through for
each one of the results.
And these are just going to be the different items or elements.
And let's for now will console log the elements as these are the first ones that we want to output.
So these are all the different elements and they're all going to have different properties.
So what we can do is we can and we want to look for inconsistencies within them and within the API itself.
There's the one consistency is that you are El.
So they all have you or else to get more information.
So we can use that to retrieve additional content whenever it gets clicked.
And we're just checking for right now some other consistencies, so they all have names as well, so
we can use the name and the euro and output those on the page.
So let's list the name.
And then there's also your URL and I would put them onto the page.
So take output and update the inner HTML of output.
Just clear that.
Now let's create an element for the page so you can just call it div and using the document create element.
So we want to make this element.
When it gets clicked then it will go to make a fetch request to the euro and each one of these and then
output that content within the output area.
So that's why we're creating a separate elements.
And this can be anything could be a div as we're doing this with JavaScript.
So making it clickable and within the div update, the text content and the text content of the div
is going to be the element name and then take that element and add it to the parent element.
So the append and appending the div.
So let's see what happens and how that looks visually.
So we've got all of these items here and we can also add in and do some styling for these.
And I'll do this with class.
So I didn't see some padding.
And also, let's do a text, a line so central, a line set with.
And this is also whatever you prefer.
And as I want to make these clickable items, that's where I'm going to be applying the box to that
element.
So that the user knows that these are going to be clickable so we can add in a hover effect and others
to that.
So let's add in the cursor.
And also, let's do a background color, so background color and I'll make a black background and color
of the font is going to be white and I'm going to set a margin for top and bottom of five picks.
So see what that looks like.
And so now whenever they get hovered over to give them that more clickable type a feel, let's just
do it the opacity.
You could also update the background color.
Actually, let's do something different.
We'll update the background color to read.
It actually doesn't matter whatever you prefer for the styling.
So now whenever you hover over these and we need to add in the click action, so what the click action
is going to be doing is that it's going to be loading the you are all content and actually it looks
like films doesn't have a name within the results.
So let's double check that out, its name or title.
So do it that way.
We're so one way or another, we'll get some content output there.
And it usually you do need to or you should double check just to make sure that it's loading properly.
And so now all of them are going to be consistent.
And when they get clicked, we want to just load the you are all content and loop through all the properties
and output the contents of the properties on the page.
So now once we click it, so we're going to add in to these elements as well and add the euro.
So that's all within the element euro.
And whenever they get clicked, so they have and at an event listener to the element that we're just
creating.
And that will just.
And we'll just create a function called show item, so that will be the next function that we're going
to work on in the list here.
And that's passing in the event target, and we'll get the elements using the event target, so that
way we can console log the elements, you, Earl, whatever it gets clicked.
So let's just make sure that that's working so that whenever I click these, I should be able to load
the details of whatever item I've clicked.
And that looks like it's working, it should be fairly consistent, so now we can get the details and
load it to the output, whatever that gets clicked.
So that's what we want to do here is where we want to make another Futch request to this URL and then
build the item on the page.
So from here, we can just make our Futch request because they're all passing in the euro and this should
all be coming back as JSON.
So the response should all be back as an adjacent object and then we'll output it to the page as data.
And for now, we'll just consult, log the data contents.
And also, I am going to add in a catch.
And let me wrap this with the brackets.
And let's add in a catch in case we have any issues and we'll get the ER contents.
And we can load that onto the page and we can just put out put that in our HTML and we'll just write
the error.
So if we do have any problems getting the data and we'll just output error on the page.
So it looks like we are able to get the data and just as we did for.
In order to get the property values and the object information, we're going to do the same thing.
We were just going to list out all of the contents that are being returned back here.
And there are some that are arrays.
So we have to as we're looping through, we'll check the data types.
So looking for the property and data, so let's update that and that's actually data.
And again, you can shorten it if you want.
I usually like to shorten that so it's a little bit easier and shorter to right.
So let's see what we get back here.
So clear that and let's click one of those and see what we've got.
So we've got a listing of the films, so that's within an array, the residence as well.
So we'll leave it at that and you can also, as you loop through, you can see if this particular item
is an object or if it's a string value.
So you can take the data types.
And console logged the various data types of the elements.
And you can get that data type by type of.
So let's load some content, so see, there's a string and if it's not a string, it's an object.
So we can do a check to see if the type of is equal to string, then we're OK to output it.
Or else what we need to do is just string of five that value.
And let's create a variable.
For whatever the homeless and using a ternary operator, we're going to check the condition to see if
it is a string and if it has a string, then we're OK to output.
The content.
And that should be a question mark, and there's the calling for the alternative, and if there is a
need for the alternative that we can use that Jason string of PHY to string offi the contents of the
property object.
And let's update the view to toggle the word drop and now within the output.
So we want to clear the air, put the entire HTML and just set that to blank, and then as we update
the output, the inner turmoil of output and using the biotech's.
We can get the property.
And then also get the e-mail content.
So let's see how that works.
And so that's OK, putting those values there, let's actually separate them as separate divorce.
So a little bit easier to read, and then, of course, we could add classes as well.
So that's our details there being output.
And then the films, because this was an object, it's got string of light and you can also within the
condition, if you want to break apart the object and loop through the items within the object, you
can do that as well.
So in this case, it looks like it's producing different end points so you can loop through those and
get the details of the endpoints.
Test it out just to make sure that it is working.
And you could be ready to move on to the next lesson where you are still doing some tweaks and adjustments
to this up many application, the tasks for this lesson are to connect to the end point the Star Wars
and point load and create the elements from the JSON data that's being returned back from the endpoint.
So construct your user interface and interaction screen from the data from the endpoint and dynamically
generate it and then also create interactive page elements that load additional content from the page.
Again, making connections to the JSON endpoint, make more fêtes requests depending on what the user
selection, and create a dynamic and interactive experience all generated from the Star Wars API endpoint
for users within your Web page.