- [Instructor] The same way that we can get local data
into our application using Axios and Fetch,
we can also get external data using Axios or the Fetch API.
So the first thing you need is going to be
a URL to arrest API or some other type of API
that you want to communicate with.
So I have this URL here with some sample data
from an API that somebody has created for me.
This is a pretty simple rest API.
You can see that it's returning right now,
an array of JSON data
that is very similar to the data
that is already in our application.
So if you wanted to use this in our app,
all we would need to do would be
to replace this URL right here
with the URL to our API.
So let's take a look at what happens when we do that.
And you can see that the same data will load,
except that this time,
it's coming in from the network
instead of from the local file.
So we technically don't need that data.JSON file,
I'm going to leave it in there though.
And we can call that API in different ways,
and pass along different parameters
depending on what I need.
So traditionally, APIs can get past parameters
in a number of different ways.
And this really all depends on how the API is generated,
so you'll need to check the documentation
to what you're trying to get.
With this particular API, we can ask for the same data
by adding this music.php,
and then adding a series of parameters
at the end of the php right here.
So we can say something like,
question mark and then type in order,
and then put in an equals sign, and then name.
You've probably seen URLs that look like this on the web,
and what you do is you pass along different parameters,
if you wanted more than one, with ampersand,
and maybe there could be something like a quantity here,
and you can return a certain number
of records by typing that in.
In this particular API,
we can request the order to be different than the default.
There's another way that you can call this API, so,
we can also do the same thing by saying music/order/name.
It's going to do the same thing.
Now we could put that in our API call directly,
so we can just type in the URL
in this get request like this,
and if you do that you'll notice the information
will now be alphabetized, which is pretty good.
Now, normally APIs will have
more than one of these parameters.
This one's just a very simple API,
so there's another way that you can make a call here,
and we've talked about it before,
instead of using the get method,
you could just pass along an object
with the more, sort of, detailed version of the request.
So we could say something like this,
and what I want to do is pass along the URL,
and in addition to that,
we can pass along the method, the default method is get,
so this isn't really necessary.
But you can pass along the method,
and then in addition to that,
you can also pass along a series of parameters.
And you do that with the params keyword,
you got to make sure that this is valid JSON object,
so we're going to need a comma right here.
And then we can pass along the order,
and put along the name as the order.
So this should do the same thing.
You can see that it's still giving us the order by the name,
either way is fine, the important thing here
is that you need to know how to work with the API
that's usually done through some documentation,
that tells you how to pass parameters,
what the available parameters are, and what they do.
Now in the same way that we can
get information from our API,
we can also request that something gets deleted,
and in this handle delete method you may
try something like this.
So you may try to say do the Axios.delete method,
and we could just use the URL to make this super simple.
Now delete usually requires some sort of ID.
But this API isn't really complicated,
so it does have the ability to receive a delete request,
but it doesn't actually do anything with it.
It would be sort of dangerous if I just let everyone
have access to a location with a bunch of data
that I would allow people to delete, so.
But this will show you something else
that you'll need to take care of.
So if we do this, you'll see that this still works,
and when we try to delete something,
it's still going to delete because it's still executing
this section right here,
but it's actually going to be giving you an error,
and it pertains to something that
you have to worry about as well.
Whenever you send any request to a server,
the request has to be able to take care of
those requests based on the permissions that you're given.
So for example, in this API that we're using,
we can use a get request to receive information,
but we can't delete files unless they are
in the same website and you can see,
that it's telling you right here,
method delete is not added by access control allow methods.
So this wouldn't be able to do anything
with the delete request,
unless it was actually sitting on a server,
and that server had adequate permissions
to work with the API.
So that's another thing that you have to watch out for,
as I mentioned, we don't really have a very complicated API
that allows us to do that much here, for security reasons,
so we're just going to leave it right now
with the ability to get the information,
which is fine, and display the information.
I do like that I can get it in order,
that way I don't have to worry about sorting it.
You also have to worry that sometimes making a request
just to sort something is actually going to be
slower than just sorting the thing yourself in JavaScript.
So sometimes it's actually a little bit better
to sort things internally, but,
if you are making an initial request,
I think it's fine to just ask for the order to be sorted.
Now I'm going to make an improvement to my application.
When I click on one of these songs,
there is no visual way of knowing
what song the application is currently playing,
so I'm going to modify that.
I'm going to make an improvement in this application,
so the problem is that if I have a small window,
and I scroll down past the current song,
when I click on a song I can't tell which song is playing
by just looking at the list.
So I'm going to modify this application to fix that
by going into my song list and adding a conditional class.
So right now I'm adding all these classes right here,
with just html and these are bootstrap classes.
But I can also include a class object
that will activate certain classes
depending on some variables.
So I'm going to say class and then I'm going to
pass along an object here,
and this is going to use the active class
on each one of these list items.
And I'll use a conditional here,
when the current song exists,
which is one of the variables that we are passing,
and if the current song is not null,
so if it actually does exist,
even though we pass it, it could be that it has no value.
And then also make sure that
the current song is the same as the song.
So if the song that we are clicking on exists,
so if this variable exists,
and the current song is the same
as the song that we're looping through,
then it will use this active class.
So let's test that out.
(upbeat pop music)
And notice that when I click on that now,
it gives you this slightly different background.
Which I think is a better interface.