如何在 HTML 中显示 Firebase 查询结果（未定义错误）答案

【问题标题】：How to display Firebase query result in HTML (undefined error)如何在 HTML 中显示 Firebase 查询结果（未定义错误）
【发布时间】：2018-12-02 10:05:55
【问题描述】：

我正在尝试以 HTML 格式显示 Firebase 查询结果，但浏览器显示“未定义”而不是我在控制台中看到的值。

var showData = document.getElementById("showData");
var button1 = document.getElementById("but1");

var usersRef = 
firebase.database().ref('stores/').orderByChild("sid").equalTo(123);



function s2_but() {   //function gets trigger when button pressed
    usersRef.on('value', snap);

function snap(data) {
    data2 = data.val();
    console.log(data2);
    showData.innerHTML = data2.sname; //sname is the name of child key 
                                      //whose value I want to show
       }
};

这是控制台显示的内容：

entry1: {prod1: "coffee", prod2: "sandwich", sid: 123, 
         sname: "Java Coffee"}
__proto__:Object

因此，我可以检索数据，但是当我使用以下代码以 HTML 格式显示数据时，我在浏览器中得到一个未定义的数据。

<p id="showData"></p>

Undefined variable showing in the web-browser 我认为当我尝试使用以下代码从对象调用确切值时会发生错误，但我不确定。我见过的所有例子都是这样做的。因此，我很困惑。

showData.innerHTML = data2.sname;

在 HTML 文件中，我适当地包含、初始化了 Firebase 和 jquery 等。

我将非常感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript html firebase firebase-realtime-database undefined

【解决方案1】：

我找到了解决办法：

    function snap(data) {
    data2 = data.val();
    data3 = data2.entry1.sname;
    console.log(data3);
    showData.innerHTML = data3;
};

Firebase 通过此查询返回一个嵌套对象。 entry1 是此对象的第一级或键的名称。因此，必须在访问值之前输入其名称。

如果“entry1”实际上是由变量定义的怎么办？

【讨论】：

很高兴您能找到解决方案。关于您的后续问题，您可以这样：data2[entry1].sname。顺便说一句，最好将后续问题放在该答案的 cmets 部分中，而不是 :)
谢谢！我将代码编辑如下，现在当第一级数据是变量时它也可以工作。函数快照（数据）{ data2 = data.val(); var level1 = 'entry1'; data3 = data2[level1].sname;控制台.log(data3); showData.innerHTML = data3; };

【解决方案2】：

我想我能够找出最好的方法来做到这一点。需要一段时间才能从 SQL 背景中了解 Firebase 的局限性。

为了查询数据库，我使用了这个而不是使用 orderByChild()：

var sid = 'entry1';
var usersRef = firebase.database().ref('stores/' 
+ sid);

现在我可以得到 sname 的值，而无需在链中输入它的键：

function s2_but() {
usersRef.on('value', snap);
function snap(data) {
    data2 = data.val();
    data3 = data2.sname;
    console.log(data3);
    showData.innerHTML = data3;
};
};

这是为了查询一个看起来像这样的 Firebase 数据库条目。

我希望这对希望解决类似问题的一些人有所帮助。如果您有任何建议，请让我知道。

【讨论】：