Cannot read data in Firebase Realtime Database
Question
I'm building a login page using the Firebase realtime database and JavaScript/HTML. I've already created a sign up page where after one signs up, they are given a unique ID. This ID is the title of the parent of all the user's data in the firebase database. The login page has a form where one pastes this ID, and then is able to access the data they've inputted when signing up. My problem is that the code is not retrieving any of the data (specifically once the user logs in, I want their email to be alerted, but this is not occurring). Can anyone help me with this? My code and an image of my database is below:
JavaScript:
var firebaseConfig = {
apiKey: "..................",
authDomain: "..................",
databaseURL: "..................",
projectId: "..................",
storageBucket: "..................",
messagingSenderId: "..................",
appId: "..................",
measurementId: ".................."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Reference messages collection
document.getElementById('loginForm').addEventListener('submit', getData);
function getData(){
var loginId = document.getElementById("loginId").value;
firebase.database().ref('user/' + loginId).once('value').then(function (snapshot) {
var address = snapshot.val().address;
var city = snapshot.val().city;
var email = snapshot.val().email;
var firstname = snapshot.val().firstname;
var lastname = snapshot.val().lastname;
var password = snapshot.val().password;
var phonenumber = snapshot.val().phonenumber;
var postalcode = snapshot.val().postalcode;
var state = snapshot.val().state;
alert(email);
});
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Building</title>
<!--<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">>-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />-->
<!--<link rel="stylesheet" href="style.css">>-->
</head>
<body>
<div class="container">
<h1 class="brand"><span>Web</span> Building</h1>
<div class="wrapper">
<div class="company-info">
<h3>Web Building</h3>
<ul>
<li><i class="fa fa-road"></i> 1 Something st</li>
<li><i class="fa fa-phone"></i> (555) 555-5555</li>
<li><i class="fa fa-envelope"></i> test@test.test</li>
</ul>
</div>
<div class="contact">
<h3>Login</h3>
<form id="loginForm">
<p>
<label>Paste Login ID</label>
<input type="text" name="loginId" id="loginId">
</p>
<p class="full">
<button type="submit">Login</button>
</p>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-database.js"></script>
<script src="login.js"></script>
</body>
</html>
Firebase Database:
EDIT
Here is the structure of my database:
{
"user" : {
"8gfpBhVrIi" : {
"address" : "3 second street",
"city" : "albuquerque",
"email" : "tedbert999@gmail.com",
"firstname" : "Teddy",
"lastname" : "Porfiris",
"password" : "password",
"phonenumber" : "4161231234",
"postalcode" : "123456",
"state" : "New Mexico"
}
}
}
Here is the code to receive the login Id once one has signed up:
JavaScript:
var firebaseConfig = {
apiKey: "..................",
authDomain: "..................",
databaseURL: "..................",
projectId: "..................",
storageBucket: "..................",
messagingSenderId: "..................",
appId: "..................",
measurementId: ".................."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);
// Generate Id
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
// Submit form
function submitForm(e){
e.preventDefault();
// Get values
var firstname = getInputVal('firstname');
var lastname = getInputVal('lastname');
var state = getInputVal('state');
var email = getInputVal('email');
var phonenumber = getInputVal('phonenumber');
var password = getInputVal('password');
var address = getInputVal('address');
var city = getInputVal('city');
var postalcode = getInputVal('postalcode');
var accountId = makeid(10)
// Save message
saveMessage(firstname, lastname, state, email, phonenumber, password, address, city, postalcode, accountId);
var id_sentence = document.getElementById('loginId');
var accountId_text = document.createTextNode(accountId);
id_sentence.appendChild(accountId_text);
// Show alert
document.querySelector('.alert').style.display = 'block';
// Hide alert after 3 seconds
setTimeout(function(){
document.querySelector('.alert').style.display = 'none';
},3000);
// Clear form
document.getElementById('contactForm').reset();
}
// Function to get get form values
function getInputVal(id){
return document.getElementById(id).value;
}
// Save message to firebase
function saveMessage(firstname, lastname, state, email, phonenumber, password, address, city, postalcode, userId){
// Reference messages collection
var newMessageRef = firebase.database().ref('/user/' + userId);
newMessageRef.set({
firstname:firstname,
lastname:lastname,
state:state,
email:email,
phonenumber:phonenumber,
password:password,
address:address,
city:city,
postalcode:postalcode
});
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Design</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="brand"><span>Good</span> Web Design</h1>
<div class="wrapper">
<div class="company-info">
<h3>Web Design</h3>
<ul>
<li><i class="fa fa-road"></i> 11 street st</li>
<li><i class="fa fa-phone"></i> (555) 555-5555</li>
<li><i class="fa fa-envelope"></i> test@tes.test</li>
</ul>
</div>
<div class="contact">
<h3>Sign Up</h3>
<div class="alert">Your have been signd up!</div>
<form id="contactForm">
<p>
<label>First Name</label>
<input type="text" name="firstname" id="firstname">
</p>
<p>
<label>Last Name</label>
<input type="text" name="Last Name" id="lastname">
</p>
<p>
<label>State</label>
<select name="state" id="state">
<option value="Alabama">Alabama</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="D.C.">D.C.</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Maryland">Maryland</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota </option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Virginia">Virginia</option>
<option value="Vermont">Vermont</option>
<option value="West Virginia">West Virginia</option>
<option value="Washington">Washington</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</p>
<p>
<label>Email Address</label>
<input type="email" name="email" id="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
</p>
<p>
<label>Password</label>
<input type="password" name="password" id="password">
</p>
<p>
<label>Address</label>
<input type="text" name="address" id="address">
</p>
<p>
<label>City</label>
<input type="text" name="city" id="city">
</p>
<p>
<label>Postal Code</label>
<input type="text" name="postalcode" id="postalcode">
</p>
<p class="full">
<button type="submit">Sign Up</button>
</p><br>
</form>
<div id="loginId">Your Login ID is: </div>
<form action="/login.html">
<p class="login">
<button type="submit">Login</button>
</p>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-database.js"></script>
<script src="main.js"></script>
</body>
</html>
EDIT
Here is the image of the error I am getting:
1 answers
solution1
0 2020-09-06 00:58:14
Please try to use the following code and let me know if it works:
I think a '/' is needed to access the Firebase as we can see in the Firebase Official Documentation and also you need to use backticks (`), and not single quotes ('), to wrap a string as follows:
function getData(){
var loginId = document.getElementById("loginId").value;
firebase.database().ref(`/user/` + loginId).once('value').then(function
(snapshot) {
...
...
}).catch(function(){
console.log('error');
});
}
function saveMessage(firstname, lastname, state, email, phonenumber, password, address, city, postalcode, userId){
// Reference messages collection
var newMessageRef = firebase.database().ref(`/user/` + userId);
newMessageRef.set({
firstname:firstname,
lastname:lastname,
state:state,
email:email,
phonenumber:phonenumber,
password:password,
address:address,
city:city,
postalcode:postalcode
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
read data using Vue 3 + Firebase realtime database
How to read data from Firebase Realtime Database with Vue.js
How to read data from Firebase Realtime Database with the auth rule on web?
firebase realtime database, how to read only own data?
Unable to read data from Firebase Realtime Database in React Native
Data not added to firebase realtime database
Deleting data on RealTime Database - Firebase
how can i read firebase realtime database?
How to only read changes in firebase realtime database
How to read, write and query data in Firebase Realtime Database using Firebase SDK v9 (Modular)
Related Tags