- [Instructor] In order to read our data from an API,
I'm going to get started by showing you how to read
a data from a local file, which is the easiest way
to understand how data can be imported into your components.
Now whenever you create a component in Vue.Js,
you're dealing with something called the Vue Instance.
And it's the place where the application starts working
with what happens in Vue.
Now as part of the loading process,
you go through what is called a lifecycle hook.
You can find more information about the lifecycles
in this URL.
The main thing to note is that every component goes
through a series of steps as information gets loaded
into the application.
And there are all these places, or hooks, where you can
place different pieces of code that will affect
your application.
And one of the most important ones
is this created lifecycle hook,
which allows you to do things before the component
has fully loaded once it gets initialized and the element
in the Vue component doesn't yet exist.
Another one is this mounted lifecycle hook,
and this is where you can do something that is manage
after the element has been created
and after it is mounted into the application.
So what you can see is that sometimes you want to load
things at the beginning of when the application
gets created,
and sometimes you want to do things a little bit
more often as the components themselves are being loaded.
So this is important because sometimes we have components
that we want to modify when things are changed,
and sometimes we want to do something just at the beginning
of the application.
Now to do this, it's actually super easy.
All we have to do is just as in the app.vue file,
we're creating these different objects here.
This one's called methods,
and then we define the components.
And here's where we define the data
that it is our application.
We can also call these different lifecycle hooks,
just like we would with any of these other methods.
So what we can do is ask that when the app.vue component
is created, I want you to execute a special function,
which is how you load data into the application.
Now the easiest and most traditional way to load data
is by using something called the Fetch API.
Now the Fetch API is an interface for accessing
and manipulating HTTP documents.
So there's a lot more to learn about the Fetch API,
and you can take a look at our search,
and look for the Fetch API in our library.
I'm going to show you how to implement it pretty easily
to read data from our local file,
and we'll need to create that file.
So right now our data object has this songs array
that has a ton of songs in it.
So I'm going to go ahead and collapse it again,
and select the array right here.
And then I'll initialize it to null so it won't have
a value when this application starts.
I've already typed in this created methods,
so this is where we're going to read the data in.
But of course we need to go ahead and place that data
in our server.
Now you want to place that data in this public folder.
So because webpack is managing our application,
public is where we would put things that we want
to be available to the general web.
So I'm going to create a new file right here called data.json,
and I'm just going to paste that array into this file
right here.
And I'm noticing that when I pasteded this in here,
because I have an auto-formatter that the JSON file
that I originally imported got converted
into a JavaScript object.
The way that I can tell is the quotations are gone
from these different parameters right here.
So what I need to do is go back into my original
song data which I got from this video
and copy the ones that have the quotations
because this is no longer a JavaScript object.
But it's going to be a traditional JSON file.
So I'm going to copy that
and come back here and paste this.
And now you won't see any errors
because now this is a properly formatted JSON document.
Let's go ahead and save that,
and we'll go back here into our app.view file.
And now in our created lifecycle,
what I'll do is I'll use the Fetch API,
and I'm going to make a call to my data.json file
which is the file located in this public folder.
Webpack is going to take care of managing all
that combination of things for us.
So after we make this call,
we can use the promise command here called then.
This means that it's going to try to read that file,
and it'll get a response from the server.
We'll need to convert that response
into a JSON document.
So we'll say response.json.
And that will parse the document for us.
And once that's done then we will take that response,
and do something with it.
So this is when we would say go ahead and place
that response, response, response.
There we go.
And we are now moving it into this.songs.
Now if you want to you can also use
a catch command here to process any errors.
So you can say if there's an error,
go ahead and we'll just output it to the console.
All right, so let's take a look at our document.
So we may have to reload this thing up.
It looks like response is not defined.
You know, I am really bad at spelling response.
It's one of those words that are tough,
so looks like I just misspelled it right there.
So you can see that the file is coming in just fine.
Let me talk a little bit more about what else
you could do here.
If you include an additional object here,
so this could be an object where you pass
along methods and other parameters,
you could use this same Fetch style call
to do things like post a series or a new record
into your REST API.
Now all that would have to be managed by the REST API
that you would have to build separately.
So the default is GET.
You don't have to use the GET method here.
If you know that you're using GET,
and if you want to you can add some additional things here
like body, send in custom headers, anything that the
REST API that you're using would need to make
a normal call can go in this Fetch call right here.
But since we're using the simplest version of it,
all we need is that in the proper lifecycle method,
and we can easily use that to read local files.
There is one small problem with using the Fetch API,
and that is that it's not completely compatible
with things like Internet Explorer
and other less known browsers.
So if you're planning to use it,
make sure that you are targeting a specific level
of browsers that you're comfortable with.
Now because of that, people use another API called Axios,
and we'll take a look at how that works in the next video.