- Let's work on reading the data
from our database so that we can
display it in here.
So we'll go over to App.vue,
and down here where we check to see when the
component is mounted,
we're checking to make sure that the user exists,
and then we're going to need to add
a read statement right here, and we're going to
read all the information into a
variable that we're going to call meetings here.
So this will be a empty array to begin with.
And let's go ahead and make this wider here.
So, now we can use the information from the database.
And we're going to look for the user's collection,
and in there we're going to look for the document
with the current user's id,
and we're going to then look for the collection
called meetings.
So once we do that,
we are going to check to see
if there's any new information.
So this is a little bit different.
Before, we were just reading data from the database.
We were doing it once,
but now we need to make sure that we check the database
as it changes.
So when somebody adds a new meeting,
we need to make sure that we collect that information.
So, were going to use something called onSnapshot.
So it's an event.
And it looks like this.
So this is going to continuously check the database
for changes.
And then, we will capture the snapshot information
into a variable we're going to call snapshot.
I'm going to go through each one of these snapshots.
Right, so we'll use a forEach statement.
And that will return a document.
So remember, when we're looking at the database,
you can see that I've added a couple of other
meetings right here.
When we're looking at the database you have
the meetings and then you'll have a document
for each of the meetings.
Each of those gets a specific id right here.
And then we have the information in each of the meetings
as information inside each of the documents.
So over here,
first we go to the meetings,
then we check to see if there's any new changes,
and then we capture all the information that we receive
from the database.
And we're going to go through each of those documents right.
And let's go ahead and add another arrow function here
to get the information,
and we can do just a push onto our meetings array
so we'll say this.meetings, push.
And what we want to push is not the entire document
because remember, anytime you get something from
Firebase, your going to get a ton of stuff
we're really just interested in a couple of different
feels that we're going to be using.
So we can say id is going to be doc.id.
Every document has an id.
It's these funny numbers here.
Or these hashes that you've seen.
And were going to get the document id as well as the name.
The name field is the name of the meeting.
And we'll use the data method to retrieve the data
from the database, and then we will look for the name.
Alright so let's check this out and your not going to really
see anything in your interface 'cause we haven't done
anything to display our data and let's go ahead
and go to the inspect section of our browser
and we'll click on this view tab
and then we'll check out the app
and now you'll see that we have the three meetings.
We're not really displaying them yet,
we just have the meetings information
pushed into a meetings array
and we pushed in the id and name of
each one of the meetings.