从 Firebase 数据库 Node.js/JavaScript 获取数据时遇到问题答案

【问题标题】：Trouble getting data from Firebase database Node.js/JavaScript从 Firebase 数据库 Node.js/JavaScript 获取数据时遇到问题
【发布时间】：2016-06-25 18:34:19
【问题描述】：

大家早上好，作为新用户，我在使用 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 控制台生成的所有正确信息——我希望这就是我需要解决的所有问题！如果您需要更多信息，请告诉我，我很乐意提供，感谢您抽出宝贵时间查看我的问题。

星期六快乐！

【问题讨论】：

标签： javascript jquery ajax node.js firebase

【解决方案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();

【讨论】：

嘿，感谢@adolfosrs 回复我，但即使进行了这些更改，我的控制台也没有任何记录。我将您的代码复制并粘贴到我的firebaseData.js 中，但没有记录任何内容。我尝试格式化我尝试检索数据的尝试，例如 value events 下的示例，但这也无济于事。
更新：嘿@adolfosrs 几个小时前，我能够将数据库中的内容导入控制台。我按照您的建议做了一些事情，并感谢您提供有关 snapshot.forEach 循环的提示。我也 stackoverflow.com/questions/37817028/… 这个答案来指导我。基本上不是使用myDBReference.child("user") 这对我有用：firebase.database().ref() 并且它有效！我现在在控制台中有东西，下一个挑战是将其放入 DOM 中。