我编写了一个代码来输入并将数据保存到firebase。数据保存完美,但现在我想在我的html页面上使用javascript显示相同的数据。我该怎么做? (P.S我在很多地方都提到了这个问题,但是没有一个适用于我的文档。作为参考,我把它们放在js文件的注释中)以下是javascript文件和HTML供参考。
main.js
// Initialize Firebase
var config = {
apiKey: "AIzaSyC7HkjUoZe0Bj4xAd3up9rMXoMWay8MCpE",
authDomain: "contactform-9133a.firebaseapp.com",
databaseURL: "https://contactform-9133a.firebaseio.com",
projectId: "contactform-9133a",
storageBucket: "contactform-9133a.appspot.com",
messagingSenderId: "950534208323"
};
firebase.initializeApp(config);
//ref msg collection (collections are tables)
var messagesRef = firebase.database().ref('messages');
// var ref = firebase.database().ref();
document.getElementById('contactform').addEventListener('submit',
submitForm);
/*var list = document.getElementById('namelist');
var listRef = friebase.database().ref().child('name');
listRef.on('value', function(datasnapshot) {
list.innerHTML = datasnapshot.val();
});*/
/*ref.on('value', function(snapshot) {
console.log(snapshot.val());
});*/
//submit form to database
function submitForm(e) {
e.preventDefault();
//get values
var name = getInputVal('name');
var address = getInputVal('address');
var email = getInputVal('email');
var phone = getInputVal('phone');
var password = getInputVal('password');
/*function gotData(name, address, email, phone, password) {
var n = name.val();
console.log(n);
//var keys = Object.keys(messages);
// console.log(keys);
}*/
saveMessage(name, address, email, phone, password);
//show alert
document.querySelector('.alert').style.display = 'block';
//hide alert after three secs
setTimeout(function() {
document.querySelector('.alert').style.display = 'none';
}, 3000);
document.getElementById('contactform').reset();
}
//function to get form values
function getInputVal(id) {
return document.getElementById(id).value;
}
function saveMessage(name, address, email, phone, password) {
var newMessageRef = messagesRef.push();
newMessageRef.set({
name: name,
address: address,
email: email,
phone: phone,
password: password
});
//var hot = newMessageRef.val();
//var keys = Object.keys(hot);
/* for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var name1 = hot[k].name;
console.log(name1);
//var li = document.createElement('li', name);
//li.parent('namelist');
}*/
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Comaptible" content="ie=edge">
<title>Medi Aid</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" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1 class="brand"><span>Medi Aid</span></h1>
<div class="wrapper animated bounceInLeft">
<div class="our-info">
<h3>Medi Aid</h3>
<ul>
<li><i class="fa fa-road"></i> SRM IST</li>
<li><i class="fa fa-phone"></i> Ph-no:000 000</li>
<li><i class="fa fa-envelope"></i> Email</li>
</ul>
</div>
<div class="contact">
<h3>Email Us</h3>
<!--To do validation -->
<div class="alert">You have been signed up</div>
<form id="contactform">
<p>
<label>Name</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label>Address</label>
<input type="text" name="address" id="address" required>
</p>
<p>
<label>Email Address</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone" id="phone">
</p>
<p class="full">
<label>Password</label>
<input type="password" name="password" id="password"
required>
</p>
<p class="full">
<button type="submit">Submit</button>
</p>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js">
</script>
<script src="main.js"></script>
</body>
</html>
我也试过以下的东西,但它仍然无效:
main.js(contd.)
messagesRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
var name_val = childSnapshot.val().name;
console.log(name_val);
// $("#namelist").append(name_val);
$("#namelist").append("<p>" + name_val + "</p>");
});
});
答案 0 :(得分:1)
试试这个。
ref.child('your-node').child('your-node').once('value').then(function(snap) {
if(snap.val()){
//do your thing here.
console.log(snap.val());
}
}, function(error) {
// The Promise was rejected.
console.log('Error: ',error);
});