Firebase Auth Tutorial #9 - Getting Firestore Data

Key Takeaways

alright then so now we're keeping track of the user when they log into the application when they log out or when they first land on the application we can see their current authentication status so now we can start to play around with that a little bit and show and hide content dependent on whether they're logged in or not but before we do that I want to do one more thing so right now all of these little guides right here they are all hard-coded inside our template down here if we just scroll down a bit we can see those down here right these are not actual guides so what I'd like to do is store data inside a firestore database which is by firebase a different service and then retrieve those and show those as guides instead so that this data is not just hard-coded but instead stored in a database and we can answer that later on so I'm not going to go too deeply into firestore in this series like I said I do have a whole playlist on firestore so feel free to go in binge watch that to your heart's content learn all about that if you're not familiar with it and then come back here but if you just want the basics then feel free to stick around and I'll show you those now so then first of all we need to go to our firestore database and remember we set that up earlier on in the playlist so go to database and we should see that firestore database right here now right now we don't have any data or any collections inside the database so let's make our first collection and this is how we store data in firestore we make collections for example we're going to make a collection alcohol guides and then we store documents inside that collection and each document would refer to a single guide right so let's click Next and it's asking us to set up our first document inside this guides collection now this top field this document ID this is going to be auto generated by firebase so we don't need to worry about creating an ID for this document every time we create one firebase is gonna handle that for us and create a random unique ID so all we need to do is specify a couple of fields for this document and the values of those fields so documents in firestore are very much like JavaScript objects we have the field property and the value so it's like key value right so we need a title for each guide and the data type right here is going to be a string for that title and for this first one we'll just do something like find all the stars in Mario 64 classic game alright so that is the title field now for the content that is the name of the second field it's also going to be a string I'm just gonna say lorem ipsum right here and then that is it we just need two fields right the title of the guide and the actual content of the guide so now if we save that then we're going to see this over here so we see the guides collection it's just loading at the second but now we see a unique document ID right for this document we've just created firebase handled that then when we click on this we see that document right here so we have the title and the content of that document so that's one if we want to add more documents we can do right here so let's go to that and add a new title for the second document again don't touch the ID firebase will handle that and the title want for this will be beat Rainbow Road in record time that's a Mario Kart course the content again can't be bothered writing anything out some lorem ipsum okay so now we have two different documents right here inside this collection now what we want to do is from the front end we want to connect to that collection and we want to get all of the documents from it so that then we can cycle through those documents inside our application and output them right here okay so then let's go ahead and do that the first thing I want to do is going to ask Jes and I want to get a reference to the database and then retrieve the data from it so remember inside the index at the bottom when we did all the fire based off we said Const DB equals firebase dot fire store this initialize the connection to the fire store database for us and now we can access all the different methods on that database and interact with it using this constant DB we have access to that inside the auth j/s file right here because that is below this thing right here okay so at the top let us do now a little comment thing get data and then underneath that I'm just gonna say DP which is that constant then we want to say dots collection and this is going to get a reference to a specific collection don't know white said debugger I said DB right and the collection we want is the collection called guides so this is going to go out and get a handle of the guides collection then what we want to do is get all the documents inside it so we use a method called don't get to do that that goes out and retrieves those documents now then once again this is an asynchronous task it might take some time to do a second half second two seconds whatever either way it's asynchronous and it returns a promise so like the other promises we could suck on the dot then method and this fires a callback function when this action right here has completed and when it's completed it fires this callback function and the callback function takes in the response from this thing and what it does is send back a snapshot of this collection right here and by snapshot I mean it brings back almost like a digital object representation of how the database looks at that moment in time or rather how this collection looks with all the documents inside it so that goes into this error function as a callback and from that we can get access to all the documents so if I say console dot log snapshots dots docks then what that is going to do is print out all the docs in the console that are in this guides collection so we access the docs from snapshot dots Docs okay so let's save this and view this in a browser and it happens automatically so we can see the user first of all right here then this is the snapshot docs that we're getting back you can see there's two elements in it in this array the first one right here we have this document we don't see any of the fields on the document but the second one as well this document again we don't see any of the fields like the title or the content but we'll get those in a minute just understand we've brought back now these two documents from the firestore collection that we made okay so now we have those documents what I'd like to do is somehow cycle through those documents and output them to the Dom so instead of all this right here all this mumbo-jumbo where we hard code it I want to get rid of that and instead I want to cycle through these documents and output them to the Dom now remember this file right here is this is for any kind of authentication or fire based code now anything that's going to really manipulate the Dom or the template I want to go in this index file so let me save this for now and let me go inside the index file where you already have the materialized stuff right here which manipulates the Dom now what I'd like to do is create a new function and this function is going to be responsible for setting up the guides okay so first of all I need a reference to a Dom element I need a reference to this thing right here because that's what we're going to append the guides to so you'll notice my friends that this has a class of guides so we'll use that inside index J s or say Const and then we'll call this guide list equals document dot query selector and we want to grab that class which is guides like so so we have a reference to that now now the next thing we want to do is actually set up the guides so how are we going to do this well we're going to create a function and this function is going to be called setup guides and when we call this function is going to take in some data the data that we receive right here and then it's going to cycle through that data and output a guide for each element inside that data rank so let's store this in a constant this this function call it setup guides it's equal to a function an arrow function which takes in not arrows it takes in the data and this inside here is where we're going to output those guides based on the data so first of all let's call this method from off GS so instead of locking these to the console now instead what I'm going to do is say setup guides call that function and then we're going to pass in snapshot dots Docs so now we're passing this data this data array of documents into the setup guides method right here so when we take it in to this function over here we have access to that data array so now what we want to do is cycle through that data array and we want it out put a guide for each one of those elements right and each guide is going to be an li tag so we need to create some kind of template string and then append that template string to this thing right here the guide list which is the UL so let's create a variable first of all I'm going to say let HTML equal to first of all an empty string so we're going to be appending to the string as we cycle through the data okay so now we want to take that data and then we want to say for each and for each is a JavaScript method which is going to iterate through that array or fire a function for each element inside that array so what I'm going to do is say each time we take the document and that refers to the individual item each time around inside this data array and then inside that what I'd like to do is grab the data from each of those items so remember when we logged the data to the console we didn't actually see the data we're getting that error by the way but that's because we've not saved this if i refresh now then we're not going to give that error but when we logged that data to the console before we didn't actually see the properties like the title or the content for each of those elements inside the array now we need to actually go out and grab that content using a method and the way we get that is by using a method called data so I'm gonna say Const guide is equal to dot which is the individual element the document reference then dot data now what I do is log this to the console so console dot log and we're logging the guide so just so you can see this and what's going to happen is we're going to retrieve the data then we're passing it inside this setup guides so the snapshot Doc's we're passing in that array of documents then inside here we're taking in that array calling it data sitting up a blank string then we're getting that data array cycling through that array using for each by firing a callback function for each one of the items in that array and we're referencing the item as a doc that's what we're calling it then we're getting a data from each of those items using the data method right here and we're storing that inside this constant called guide then we'll login that to the console so we should see this for each individual item in the array save that and go over to the browser and now we can see these two things right here so we have the top one which is find all the stars in Mario 64 and the bottom one beat Rainbow Road in record time so each one of these things is an object right and each one has two properties content and title so we've accessed that now for each one of the different documents inside that data array so now we have that data what we can do is output that data to the Dom so I'm going to create a new constant and this is gonna be called Li make sure we spell that correctly and set this equal to a string right because we're gonna output this string to the DOM and this string is going to be HTML now instead of just doing a normal string using normal quotation marks like this what I'm gonna do is instead use a template string which is backticks and that is normally found below the Escape key near the top left of your keyboard and it looks a bit like a normal quotation but kind of slanted so they're called backticks and we use those in JavaScript to create a template string and what that allows us to do is dynamically output data inside curly braces okay so that's why I'm using a template string so I'm just gonna zoom this down to the next line put U semicolon at the end and inside this template string we'll just create a bit of HTML so first of all for each guide we want no I tagged right so we'll create that first of all then inside the Li tag oops we want a couple of things we want the guide title and also the guide content so for each one I put them inside a div then we're going to have a class equal to collapsible header if I can spell this correctly like so and give this a class of great to make the background gray and also lighten - a fall so this is just the same as before when we had all of this template code in here now just don't do this so we can see it which is basically outputting these two things right here and in fact you know what I'm going to paste copy and paste these so I've copied this let's go over here let's just paste those in because that's essentially what we're outputting for each Li tag right but instead of hard-coding the guide title and the guy body down here what were instead gonna do is output the data that we get back now in a template string the baby output data is by using a dollar sign first of all then inside curly braces we can output the data now we want the guide which is this thing up here remember with the data on it then we want the title property first of all okay then down here we want the content so again curly braces around the dollar sign curly braces then we want the guide content right so now what we're doing is creating this li HTML for each guide right as we cycle through the documents and we're going to append that to this thing each time around so I'll do that underneath I'm gonna say HTML which is this variable right here plus equals to the template we've just created for that individual guide so Li so we're going to cycle through the data we're gonna do this for each individual guide inside this data array right here okay and we're appending it to the HTML so if we have three it's going to do it three times each time it's gonna append that bit of code to the HTML now we want to take that HTML and we want to append that to this stuff over here so let's steal the all this again and we want to set the inner HTML of this thing to the stuff that we've just created over here so let me now say down here after we've done all of this for each loop let me say guide list which is the UL dots in HTML is equal to the HTML variable okay so it's gonna take all of this and output it to the Dom and this is happening after we've grabbed a data and we call this method alright so then now we've done all that let's save this cross our fingers and hope it works go to the browser and voila we can see those things right here so this has worked perfectly so again and now I've not gone into great depth on how firestore works and how we retrieve the data but like I said I'd expect you already have a little bit of familiarity with firestore now if you want to learn more about firestore and how we retrieve data like this and things like the snap shortened Docs they'll feel free to check out my fire store complete series the link is going to be down below but anyway now we've actually got the data and we're showing it right here at the mini everyone can see this but I only once logged in users to be able to see this so in the next video we're going to tackle that and we're gonna make it so that we're locking down our data so the only users who are logged in can actually see the guides