Question

大家早上好，我作为新用户使用Firebase时遇到了一些麻烦。 In my previous question我问我如何使用我的快速服务器进行API调用，将检索到的数据传递到我的firebase数据库中，然后我才能使它工作！但是，现在我想从我的数据库中获取数据并使用它在客户端填充我的DOM。

所以我们很清楚这是我的应用程序的工作流程：

从我的客户端向我的快递应用app.js发出一个AJAX请求，发送一个小数据对象{search: search}，其中搜索的值以客户端的形式捕获。（作品）
获取该数据对象并向第三方API发出另一个AJAX请求，该API返回另一个数据对象。（作品）
从第三方API获取该响应对象并将其发送到我的数据库。（作品）
脚本客户端从我的数据库中提取信息以填充DOM。（不工作）

查看无数的教程很难，我正在按照我发现的指南使用一些精美的复制意大利面，但我仍然卡住了。

以下是我用来从我的数据库中检索数据的客户端脚本firebaseData.js，我正在尝试获取端点[my database url]/user上的所有数据：

$(document).ready(function() {
  // create object instance of my Firebase database
  var myDBReference = new Firebase([my database url]);  

  console.log(myDBReference.child("user"))

});

它在控制台客户端返回：

X {k: Ji, path: P, n: Ce, pc: false, then: undefined…}

这就是我迄今为止所能做到的。下面是我的index.html，我链接到firebase它的cdn和一些其他的东西我刚被告知要包含在我的项目中：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>
<div id="top">
    <h1>Just Trying to Make a Halo App</h1>
    <form id="searchForm">
        <input id="searchField" type="text"></input>
        <input id="searchButton" type="submit" value="search"></input>
    </form>
</div>

<div id="imageContainer">
    <img id="emblem">
    <img id="spartan">
</div>

<div id="dataContainer">
    <h2></h2>
    <p></p>
</div>


<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "[my key value]",
    authDomain: "[authDomain value]",
    databaseURL: "[databaseURL value]",
    storageBucket: "[storageBucket value",
  };
  firebase.initializeApp(config);
</script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="request.js"></script>
<script type="text/javascript" src="firebaseData.js"></script>
</body>
</html>

实际上var config对象具有从firebase控制台生成的所有正确信息 - 我希望我只需要解决这个问题！如果您需要更多信息，请告诉我，我很乐意提供，并感谢您抽出时间查看我的问题。

周六快乐！

Answer 1

myDBReference.child("user")只是对数据存储位置的引用。要真正检索数据，您需要使用.on()或.once()。我强烈建议您花些时间阅读firebase documentation for retrieving data。

firebase.database().ref().child("user").once('value', function(snapshot) {
    if(snapshot.value()){
        //logs everything that is under /user
        console.log(snapshot.value());
    }
});

请记住，如果/root/user下有很多用户，则在检索完整个分支后，您需要使用以下代码对其进行迭代：

snapshot.forEach(function(childSnap){
  console.log(childSnap.val());
});

更新

由于我发现您没有使用任何SPA框架，例如Angular（带angularfire），如果您想要显示从firebase检索的数据，则需要设置元素id，而不是在你的回调中调用document.getElementById()来操纵它。

<p id="username"></p>

document.getElementById("username").value = snapshot.val();

无法从Firebase数据库获取数据Node.js / JavaScript

1 个答案:

更新