在 web 应用程序上读取和显示来自 Firebase 的数据

Question

Trying to building a simple Firebase web app.尝试构建一个简单的 Firebase web 应用程序。 I have the following:我有以下内容：

<html>
  <head>
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
  </head>
  <body>
    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "secret",
        authDomain: "secret",
        databaseURL: "secret",
        projectId: "secret",
        storageBucket: "secret",
        messagingSenderId: "secret",
        appId: "secret"
      };
      firebase.initializeApp(firebaseConfig);

      var database = firebase.database().ref('blacklist');
      database.on("value", function(snapshot){
        console.log(snapshot.val());
      });

    </script>
    <script src="app.js"></script>
  </body>
</html>

My firebase structure looks like this我的 firebase 结构看起来像这样

All I'm trying to do at the moment is print the data in the console.我现在要做的就是在控制台中打印数据。 the console is blank, not an error or anything is being shown?控制台是空白的，没有错误或正在显示任何内容？ Could you assist with showing the data.你能帮忙显示数据吗？ Im trying to show the fromId and toId for each one.我试图为每一个显示 fromId 和 toId。

Answer 1

Something like this happened to me once but it was in and Android app.类似的事情曾经发生在我身上，但它在 Android 应用程序中。 If I am seeing your full database structure, try adding an inner branch, any one of the ones inside blacklist like this and see if you get a "value" back如果我看到你的完整数据库结构，尝试添加一个内部分支，像这样在黑名单中的任何一个，看看你是否得到一个“值”

var database = firebase.database().ref('Li2.../' + 'blacklist');

To explain why I ask you to try this;解释我为什么要你试试这个； in this link https://firebase.google.com/docs/database/web/read-and-write it says在这个链接https://firebase.google.com/docs/database/web/read-and-write它说

Typical usage典型用法

value : Read and listen for changes to the entire contents of a path. value ：读取并监听路径全部内容的变化。

At the time I was trying this on Android it seemed that " paths " were not treated as " values " so if in a path there was no explicit data then it would not print to debug but it would print for those that had data.当时我在 Android 上尝试这个时，似乎“路径”没有被视为“值”，所以如果在路径中没有明确的数据，那么它不会打印到调试，但它会打印那些有数据的。 In the link I gave it says在我给它的链接中说

If there is no data, the snapshot will return false when you call exists() and null when you call val() on it.如果没有数据，则调用 exists() 时快照将返回 false，调用 val() 时将返回 null。

I think this will help you find where the problem is.我认为这将帮助您找到问题所在。

Answer 2

As im only using this for development purposes, I found out that i need to set the permissions of the app to:由于我仅将其用于开发目的，我发现我需要将应用程序的权限设置为：

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

The above code I was using is correct and works as expected我使用的上述代码是正确的并且按预期工作

在 web 应用程序上读取和显示来自 Firebase 的数据

问题描述

2 个解决方案

解决方案1
0 2019-11-02 14:15:28

解决方案2
0 已采纳 2019-11-02 22:11:26

在 web 应用程序上读取和显示来自 Firebase 的数据

问题描述

2 个解决方案

解决方案1 0 2019-11-02 14:15:28

解决方案2 0 已采纳 2019-11-02 22:11:26

解决方案1
0 2019-11-02 14:15:28

解决方案2
0 已采纳 2019-11-02 22:11:26