Question

我尝试创建一个简单的程序，从用户那里获取名称，手机号码和电子邮件地址，然后将数据放在Firebase实时数据库中。

有3个输入框和一个点击按钮执行上述操作的按钮。这是代码：

<input type="text" id="name">
<input type="text" id="mobile">
<input type="text" id="email">

<button type="button" id="button" onclick="addLead()">Submit</button>

我已经设置了Firebase：

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    ...
  };
  firebase.initializeApp(config);

  var database = firebase.database();
</script>

这是我的addLead()功能：

function addLead() {
    var clientName = document.getElementById('name').value;
    var clientMobile = document.getElementById('mobile').value;
    var clientEmail = document.getElementById('email').value;

    var newClientKey = database.ref().child('leads').push().key;
    database.ref('leads/'+newClientKey+'/name').set(clientName);
    database.ref('leads/'+newClientKey+'/mobile').set(clientMobile);
    database.ref('leads/'+newClientKey+'/email').set(clientEmail);
}

这就是我将数据放到数据库中的方法。

所以newClientKey正在生成一些字符串，插入时效果很好但现在如何检索？ official documentation无济于事。这个生成的字符串可能基于时间戳，如果是这样，那么再次生成它是不可能的。

检索如何在插入时唯一可用的唯一生成的字符串下访问电子邮件，移动设备和名称？

按照上述结构，我需要降低2级才能访问所需的数据，由于缺乏文档，我不知道该怎么做，我不确定是否有什么东西这样会起作用：

database.child().child();

Answer 1

这个问题的答案深埋在Firebase Database Reference中。 body用于在不知道孩子确切路径的情况下找到孩子。

forEach()

现在var leadsRef = database.ref('leads'); leadsRef.on('value', function(snapshot) { snapshot.forEach(function(childSnapshot) { var childData = childSnapshot.val(); }); });将包含所需的数据，也可以使用childSnapshot访问相同的内容。

child_added

唯一的区别是，在leadsRef.on('child_added', function(snapshot) { //Do something with the data });的情况下，它会从一开始就循环播放，所以如果要添加任何新数据，它还会加载以前的数据，但如果是forEach()，听众只对新生儿而不是以前现有的孩子。

Answer 2

您还可以使用点表示法来获取您要寻找的孩子的价值。

下面，我只是从评分最高的答案中注释掉forEach循环，并添加了console.log（）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row" style="margin-top: 398px;">
    <div class="col-md-12">
      <h1 id="term-header">Lorem ipsum dolor sit amet</h1>

      <p>Lorem ipsum dolor sit amet, no qui prompta salutandi, sit ea labores vulputate. Pro an debitis recusabo tractatos. Zril sapientem quaerendum qui cu, qui erat quodsi praesent no. Putent quaeque platonem mea an. Mel causae nostrud luptatum ad, eu nostro. pro ei suas duis iisque.</p>

      <h2>Lorem ipsum dolor sit amet</h2>

      <ol>
      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>

      <li>Mucius pertinacia signiferumque ut vel, modus accumsan recteque te sea. Viris vitae voluptaria ad ius, pro at dico harum. Eos graeci salutatus id, ad soluta atomorum reformidans his.</li>
      </ol>
    </div>
  </div>
  
  <footer>
    <div class="row" style="background: #1D2029; padding: 81px 140px 68px 140px">

      <div class="col-md-3">
      <h3 id="footer-address">Mucius pertinacia signiferumque ut vel</h3>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Register</a>
      <a href="#" class="footer-link">Gallery</a>
      <a href="#" class="footer-link">About</a>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Resources</a>
      <a href="#" class="footer-link">Blog</a>
      <a href="#" class="footer-link">Cities</a>
      <a href="#" class="footer-link">Careers</a>
      </div>

      <div class="col-md-2">
      <a href="#" class="footer-link">Support</a>
      <a href="#" class="footer-link">FAQ</a>
      <a href="#" class="footer-link">Help</a>
      </div>

      <div class="col-md-3">
      <h2 id="footer-contact">contact us</h2>
      <h3 id="footer-contact-txt">123456789</h3>

      <h2 id="footer-contact">email address</h2>
      <h3 id="footer-contact-txt">addffghhhhjk@asd.com</h3>
      </div>
    </div>

    <div class="row" style="background: #000000; padding: 30px 100px;">

    <div class="col-md-12">
    <h3 id="footer-address">© 2019 All Rights Reserved.</h3>
    </div>


    </div>
  </footer>
</div>

在发布本文时，我正在使用Firebase 5.9.1

src =“ https://www.gstatic.com/firebasejs/5.9.1/firebase.js”

Answer 3

var reference = db.ref('/test/');
reference.on('value', function(snapshot) {
snapshot.forEach(function(userSnapshot){
console.log(userSnapshot.val().url)
document.getElementById('gmap').href = userSnapshot.val().location;
document.getElementById('gimg2').src = userSnapshot.val().url;
document.getElementById('name').innerHTML = userSnapshot.val().uid;

我面临着同样的问题。我想从firebase实时数据库中读取数据，并在网络上打印它们。我正在读取的数据在测试文档中。使用on()函数对其进行快照。 Firebase为您提供了一个foreach循环来遍历测试文档中的数据。变量userSnapshot在循环时读取值。变量位置url，uid是测试文档中的键。

document.getElementById('gmap').href
document.getElementById('gimg2').src 
document.getElementById('name').innerHTML

是用于在网络上打印数据的DOM元素

<a id="gmap" class="btn btn-success btn-sm float-right" type="button" 
 role="button">See location </a>
 <p id="name"></p>
 <img id="gimg2" class="img-fluid"/>

我希望这对某人有帮助。

如何从Firebase数据库中检索数据？

3 个答案: