Fetch/Get All Data from Cloud Firestore (Version 9) in TABLE using JavaScript

what's up youtube welcome to our video so this video is about getting all the data from cloud firestore database into our html table using the firebase version 9 library so we are trying to get this type of data into our table so all of the records of these students now for starters i will create a table so a table inside that a heading section all of my headers will come here the table will also have a t body which will carry all of my record and it will have an id of t body one and this table will be inside a div now i will create some functions that will add records to my table so there will be a function named as add item to the table and it will take four arguments name roll number section and gender then it will create a table raw so javascript can create html element dynamically so document dot create element t raw then we will add cells to this raw so let td cells are called td td1 and create a td then td1 dot inner html will have the serial number and i have to create a variable for that so war student number equals to zero and uh another variable for getting the t body because we will add the add our complete draw to our t body so plus student number then to complete the raw i need to add the name then of course i have to add all of these table cells to my table raw so t raw dot append child and add the td1 so i will add all the cells to my raw then one complete record would be there in my t raw so i will add the t raw to my t body so this is the function for adding one record to the table then i i will also create another function for adding all items to the table it will take the student array make the std number zero so we don't have any duplicate records if we update the table again and again so inner html should also become empty then i will add a for each loop that will take this array and add items add item to the table so from this array i will get name of the student so these names should exactly be the same as the field names over here so this function is also complete now we can so currently our table will look like this so to make it beautiful i would need the help of bootstrap so i will go with the bootstrap 4.4 introduction i need to copy this link and paste it in my head now i can use the bootstrap library so i will write some bootstrap classes which are table and inside my div i will say class container it will bring the table to the center and empty three so margin top three now if i refresh my table it will look like this we can also add a class table dark if you just like everything dark like me so now our table looks like this now we can start adding the function which will get our data from the firebase to our html table now first we need to add the configuration so for that go to project settings and inside the cdn copy all of these we need some more functions so for that i will import some more functions from the firestore library so for these import statements to work we need to give this script a type of module now we will create some asynchronous function for getting all the data so get all data once for that we need to get a reference to the docs so a constant query snapshot equals await get docs function and inside that i can write the collection function and it takes two arguments the dbr the db object that we created and the name of the collection which is students in our case or the students list now we need to create an array students then i will create a for each loop for the query snapshot because the query snapshot carries all the information of the documents and much more information that we don't need so i will so i will only take the information that we need and push it inside this array then fetch out this array into my table so for that students dot push and inside this i will say doc dot data which will have only the required information of the students and we will drop all the junk that the query snapshot possesses so we will take each of the document then extract the required data and push it into the students array so we will have all our records in the students area we just have to pass all the items inside our students array to the add all items function and then i will set my window dot on load property to run this function so let me test this out so we have all of our records in our table if we want this data to be added real time we can also create a function for that so let me just copy this and change this to real time and this will be called db reference because it will only carry the reference of the collection that it needs to get then i will remove all of this and i will create a new function on snapshot which will take the db reference and an arrow function which will carry the qd snapshot and here i will create an array and then up for each loop for again the query snapshot which will carry the document and we will push the document to the students array so doc dot data then use the add all item function and pass the array now change the window dot on load to get all data real time if i refresh this now i am getting the same data but if i add a new record here so add a document so i added a new record and you can see that the record gets added to my table so this is all for the video if you like it give it a thumbs up and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 10,324

Keywords: get all firestore version 9 data in table using javascript, show all cloud firestore 9.1 data in table, cloud firestore database get all data, all data from cloud firestore web, cloud firestore javascript tutorial, cloud firestore get all data using javascript, get complete data from a folder javascript cloud firestore database, how to get all data from cloud firestore version 9.1, firestore 9.1 tutorial video, cloud firestore v9.1

Id: 3t5A40OD6-4

Length: 11min 54sec (714 seconds)

Published: Mon Oct 11 2021