CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
Cutie Pie
Cutie Pie

Reputation: 29

Retrieving data from Firebase database

I am completely new to Firebase and I have got the data to save in the Firebase database, but I am not being able to retrieve it and show up in a table. My code is below. Any help will be greatly appreciated.

Here is the image of the firebase database:

Firebase DB

Javascript:

/*jslint plusplus: true*/
var rootRef = firebase.database().ref().child("users");

rootRef.on("child_added", snap => {

var medname = snap.child("MedName").val();
var end = snap.child("End").val();
var start = snap.child("Start").val();
var type = snap.child("Type").val();
var Description = snap.child("description").val();

$("demo").append("<tr><td>" + medname + "</td><td>" + end + 
                        "</td><td>" + start + "</td><td>" + type + 
                        "</td><td>" + Description + 
                        "</td><td><button>Remove</button></td></tr>");


}

Html:

<!-------------------------------------- Table -------------------------------------------->
        <table>
            <thead>
                <tr>
                    <td>MedName</td>
                    <td>End</td>
                    <td>Start</td>
                    <td>Type</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody id=demo>

            </tbody>
    </table>

Upvotes: 1

Views: 1129

Answers (2)

deezy
deezy

Reputation: 515

Your code will work if you remove two major mistakes.

  1. Not using the correct selector as mentioned in the previous answer. $('#demo') or $('.demo') will work if you're using an ID or class selector.
  2. Don't make a variable called 'end'. End is a reserved word in Javascript.

However, here is a rewrite without using variables:

var rootRef = firebase.database().ref().child('users');

rootRef.on("child_added", function (userRecord) {

  var user = userRecord.val();
  var row = $('<tr></tr>');

  row.append('<td>' + user.MedName + '</td>');
  row.append('<td>' + user.Start + '</td>');
  row.append('<td>' + user.Type + '</td>');
  row.append('<td>' + user.description + '</td>');
  row.append('<td><button>Remove</button></td>');

  $('#demo').append(row);

});

Also it is unclear whether you meant to use ES2015 or ES5. That could cause compatibility issues depending on where the code is being run but try to not mix them.

Here are the best Javascript style guides I've ever seen:

AirBnB ES5 Style Guide

AirBnB ES2015 Style Guide

Upvotes: 1

Rahul
Rahul

Reputation: 115

first of all correct the error in the script. write #demo instead of demo in jquery . Hope this will help you completely

Upvotes: 1

Related Questions