How to get Firebase Data as List Items | HTML li tag | Realtime Database

what's up YouTube Welcome to the video so the topic is how can we retrieve Firebase data as list items using JavaScript so let's find out so basically this is called an unordered list and these are its list items so if we write this code it is translated into this on the browser so inside our database we have a list of students and inside this we have saved the information of students by their seat number and if you want to look at the Json we can export this data so you can see that this is the list of student let's start coding the HTML so the basic structure we need to declare a div with an ID of students div and then we need the Firebase configuration so to get the configuration go to Project settings and if you don't have a web app you need to add the app so this web app after adding the web app choose CDN and copy this paste it here remove these comments and we need to import some more functions which are Firebase database and now I need to create a constraint which will have my database configuration now what I need to do is I need to get the reference of the div that I created so let I will copy this so students div and document dot get element by ID and we will get the student strip so now uh I will create another variable student number which will be equals to 1 now let's create a function to get the data so function get students and constant dbref which we need to Store The Ref function and then we will use the get function and the child function inside that which will take the DB reference and the path to the list so our list is at the root of the database and it is named as list of students so we just need to write the name of the list now dot then and inside this we need a function which will get the students list and inside this we need a for each Loop and replace the replace the array with students and the element with SGD now we need a function to process this STD this will contain the information of one student so for that we need to create a function add student as list item so inside this function we take the student SGD and then we will have its key with STD dot key and its value with SGD Dot well function so the key is gonna be the seed number of the student and the value is gonna be this object which will contain the great name and the section so now we will create list items name document dot create element Li list item and S3 tag now name dot inner HTML will be name plus value dot name so the value that we received from the database the section dot inner HTML and now the heading dot inner HTML we will say student number and then the student number so this variable and once it is done I will create an unordered list and append this unordered list with all of the list item but first the heading and then I will append this list to the students div and at the end STD number is gonna be plus plus so the next time the number will be incremented by 1. now let's use this function inside this for each and add our student as a list now we need this get student function to be loaded as soon as the page is loaded so window dot add event listener we will add the load event with the get student function so now before testing I need to correct this grade and seat number now let's try to run this we are not getting the data so child is not defined I have to get up here and Define the child refresh now you can see that we have all the information of the students including their seat number which was their key let's see what structure has been created by our JavaScript function so inside this div there are four unordered lists and inside this we have one heading and four list items inside each list item there is the information of the student 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: 3,014

Keywords: get firebase data as list items, get firebase data inside html li tag, firebase data into html list, firebase array into list items, how to get data from firebase as list items, li tag firebase, ul list firebase, realtime database v10, firebase v10 tutorials, firebase 9

Id: _9ukSYu_15k

Length: 9min 38sec (578 seconds)

Published: Tue Sep 26 2023