Firebase Firestore Tutorial #3 - Getting Documents

okay so now we've hooked up our application to firebase and firestore so we can start interacting with the database now I made just one slight typo in the last video and that's this thing right here where we say DB settings timestamp in snapshots it's actually time stamps in snapshot plural okay so save that now and now before we start interacting with this database which we will do in a minute I want to show you one package I have installed for vs code which is going to help me and that is called live server so what this enables me to do is right-click on any HTML file and go to open with live server so if I do that it's going to open up a live server with this page in the browser okay so this is what our website looks like at the minute thanks to that styles.css alright then so now we want to start interacting with this database so remember we stored our database right here in this variable so whenever we want to start interacting with the database we use this constant right we say DB dot something so let's do that inside a PJs but what exactly do I want to do well what I'd like to do is actually go out and grab the data that we have stored inside our caffee's collection so first of all I need to get a reference to the café's collection so to do that we can say DB dots collection and then inside brackets because this is a method we say which collection we want to grab and we want the café's collection so that is going to get was a reference to this Cuffy's collection right here then what we want to do is get all of the documents inside it so to do that we use a method called get we say get like so now that is going to go out and grab all of those documents from this caffee's collection and return them to us but this right here this is an asynchronous request and by that I mean it takes sometimes a complete it might take half second or less or more meaning that we can't just store this in a variable we can't say something like var Cuffy's is equal to this and then use caffee's underneath because cafes might not have populated yet this is asynchronous it takes some time to do so what it does for us instead is return to us a promise and that promise basically says look at some point this method is going to complete it's going to grab that data if we tack on a dot then method then what will happen is when this action is complete and we retrieve the data this method fires right the Doppler method fires and it takes back a callback function and this is the function which will execute when this action is complete right here okay so we can wait until that's done and then fire a function when we have that data now inside here will pass through that callback function which is going to be an es6 error function and inside we can pass through a parameter which will be a snapshot of the database this is what we receive but when we call this method we're receiving a snapshot back over the database at that moment in time and a snapshot is just basically a representation of the different data inside the collection so we can access all of the different documents from that snapshot inside this collection by saying snapshots Docs and I can demonstrate that will say console dot log snapshots dots Docs alright then so let's view this in a browser and we'll go over here and inspect the element and inside the console we can see now this array right here so if we expand we can see at the minute it just has one element and it's right here and that's because we only have one element inside I would document our collection right here let's add another one so we'll leave the ID so it also generates then the name over here is gonna be something like toads toadstool and again this is gonna be inside mario land so let's say mario land or right there save that and now we have two documents so now when we refresh over here I'll play that refresh now we should get to buckin and we can see these two different elements okay but we can't actually see the data from this document where is it well to get the data from a document we have to use a method so what we'll do first of all is cycle through the different documents that we have here and then we'll try to retrieve the actual data stored in each document so to do that what I'll say is snapshot dots Docs to get those Doc's and then say dot for each which is a method allowing us to cycle through each of those documents each of those items in the arendt so each time around we get the document inside the callback function and inside the function we can just say something like console.log and we'll say doc first of all so again we're just logging the actual document here so if we save then we get an error because console is not a method or an object okay so let's save that and now we can see these two objects right here but they still look the same as before we're not getting the actual data here we're not finding out the name or the city of these documents just a lot of other stuff that firebase adds for us so to get the data stored inside each document we say dots data and that is a method so now if I say this then we should see the data from each document right here the city and the name that is awesome so that's how simple it is to go out grab the data from firestore and then retrieve it okay so we're cycling through each document in the snapshot and we're getting the data from each document now that we don't just want to log this to the console what we want to do is really I'll put this to the browser right in this section right here so let us first of all get a reference in our document to this section remember inside our HTML file this right here this form tag sorry not this form tag this ul is where we want to output our different caffee's right so we need to grab this element and reference to this from our app j/s so let's do that at the top just gonna enter down a couple of lines and say Const Cafe list is equal to documents dots query so look door if I can spell it correctly and then the ID is gonna be Cafe - list that's the ID of that ul okay so we have a reference to that now now we want to get this data each document and we want to render it to this thing right here now I could do all of that code inside here but what I'd like to do is put this in a separate function so that we can use it again later on and not just inside this callback function right here okay so let's create a comment first of all saying create elements and render caffeine so we're going to create some HTML elements put the data inside those and then render them to the Dom okay so function and this is gonna be called render cafe and it's going to take in a doc so the document that we want to render now then what we want to do is call that function down here so we can say render cafe and pass in the doc make sense because now what we're doing is cycling through each document on the snapshot and we're calling this function and passing in the individual document each time around so that we can render it to the Dom so every document that we have right here is going to call that function for each one and render that to the Dom so how are we going to do this exactly well first of all we're going to create some variables I'll say let's Li equal two documents create element and this is going to be an a lighter so this Li tag is going to be sitting inside eventually this ul we're going to render it there now inside the Li we want a name and also a city so I'll store each of those in a span tag so we'll say let name equal document create element again and this is going to be a span tag and then we also want one for the city so let's sit equal document dot create elements and this is also going to be a span tag so the name and the city are both going to be inside span tags inside this align make sense cool okay so the next thing we want to do is set an attribute to this Li tag and that attribute is going to be the document ID remember this thing right here this ID which is also generated what I want to do is attach that to some kind of date attribute to each Li tag that we output so that if we need to do something with it in the future then what we can do is identify that document from the front end from the Li tag so I'm gonna say it down here Li dot set attribute and by the way if he's struggling with all of this Dom manipulation stuff I do have a series on JavaScript and the Dom that link is gonna be down below if you want to refresh it so we're gonna set an attribute and the attribute name is going to be data - ID and then the attribute value is going to be the doc dots ID so the document we receive here remember we retrieve that right here and then the ID property on that document gets us this unique ID right here we don't have to say dot data function then the ID because this property it's not stored in the data here it's stored at the top of the document that's its ID property okay so now we're setting that attribute the next thing I want to do is set the text content of each of these spam tags right here so we'll say name dot text contents is going to be equal to doc which we receive right here dot data dot name that is the property name that we have right here okay so we want to do the same thing for the city so I'll say city dot text content and that's going to be equal to the doc dot data dots city all right so we've populated the text in those different things the next thing we want to do is append both of these to the Li and then append the Li to the document so down here we'll say Li dot append child and we want to append the name first of all which is this thing this element then we want to do the same thing for the city so Li dot append child and this time the city and then finally we just need to append the LI to the catalyst right here which is the UL so we'll say Kathy lists dot append child and then finally the Li tag inside it whoo okay so I think that is all done now so we're getting the data from this collection we're getting a snapshot of that collection getting all the docs off it cycling through each one using for each for each document we're calling this function render cafe and passing the document in as a parameter for each document therefore we're creating a new Li tag to spawn tags for the name and city then we're setting the attribute of the Li tag to the ID of the document then we're setting the text content of the name and City appending those to the Li tag and then appending the Li tag to the Caffey list okay so let's cross our fingers now and hope that this works so if we go to over here and refresh then we saw those blinking but now we can see those toads Toadstool and where it is the location and Mario's market as well awesome so that my friends right here is how we get data from firebase DB collection then the collection name dot get then we use that method to fire a function to do something with that snapshot that we received back

Channel: The Net Ninja

Views: 203,974

Keywords: firebase, firestore, firebase tutorial, firestore tutorial, firebase firestore, firebase database, nosql, nosql database, firestore database, database, tutorial, firestore get, firestore collections, collections, collection, firestore collection, firebase get, get, firebase collections, firebase collection, get data, data, retrieve, retrieve data

Id: kmTECF0JZyQ

Length: 12min 25sec (745 seconds)

Published: Fri Jun 01 2018