Firebase 数据对象访问

Question

所以我正在尝试制作与用户可以选择添加到他/她的个人资料中的运动相对应的动态按钮列表。所以我有一系列运动，然后查看它们是否已经在用户的数据库中，如果是，我将其删除。但我的问题是我最终得到了所有的运动，因为控制台打印出所有运动都是未定义的。我很确定我的问题是数组中的每项运动都是一个字符串，通常当您从数据库访问对象的一部分时，您只需添加一个 .和你想要的类别。该值通常不是字符串，即（userData.Spikeball，而不是它现在正在执行的操作 userData."Spikeball"）。但是，我不知道如何将值存储在数组中以使它们工作。我尝试删除引号（我知道这很愚蠢，但你必须尝试一切），这绝对不起作用，因为它们当时是变量而不是初始化。对此的任何帮助将不胜感激。

function getNewSports(uid)
{
    console.log("uid = " + uid);
    var sports = ["Spikeball", "Soccer", "Basketball", "Indoor", "Tennis", "Golf", "Frisbee", "Handball"];
    userRef = firebase.database().ref().child("Users").child(uid).child("Sports");
    userRef.once('value').then(function(snapshot) {
        var userData = snapshot.val();
        for(var i = 0; i < sports.length; i++)
        {
            var sport = sports[i];
            console.log("userData." + sport + " = " + userData.sport);
            if(userData.sport != null)
            {
                console.log("removing " + sport + " because userData." + sport + " = " + userData.sport);
                sports.splice(i, (i+1));
                i--;
            }

        }
        for(var i = 0; i < sports.length; i++)
        {
            var newItem = document.createElement("BUTTON");
            var t = document.createTextNode(sports[i]);
            newItem.appendChild(t);
            newItem.id = sports[i];
            //newItem.class = "btn btn-secondary sportItem";
            newItem.setAttribute("class", "btn btn-secondary sportItem");
            newItem.setAttribute("onclick", "addSport(this.id)");
            document.getElementById("sports-pop-up").appendChild(newItem);
        }
        console.log(sports);
    });

}

Answer 1

这里至少要说几个问题：

userRef.once('value').then(function(snapshot) {
    const userData = snapshot.val();
    console.log(userData); // -- check the list of sports returned from Firebase.

您可以在快照上使用 forEach 来循环遍历结果：

snapshot.forEach(snap => {
    const obj = snap.val();
    console.log(obj)
}

您使用相同的 for 循环两次，因此您可以将逻辑合二为一：

for(var i = 0; i < sports.length; i++) {
    ... Your logic 
}