javascript - 如何通过 firebase 运行数据数组？

Question

我的数据结构如下

我创建了一个名为 new array 的数组，其 ID 为 [19777873, 53399293]

var dbRef = firebase.database().ref().child('Agents').child(newarray[i]);

dbRef.on('value', snapshot => {
    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
           database = firebase.database();
           console.log("Testing if the array values are here \n" + newarray);
            // var dbRef = firebase.database().ref().child('Agents').child(newarray[i]);
            dbRef.on('value', newAgents,  errData);
        }
     })
 }

新增代理功能

function newAgents(data) { 

    var container = document.getElementById("team"); 
    container.innerHTML = '';

    data.forEach(function(AgentSnap) { // loop over all jobs
        var key = AgentSnap.AgentID;
        console.log(AgentSnap.key);
        var Agents = AgentSnap.val();
        var AgentCard = `
                <div class= "profilepics" id="${key}">
                <figure ><img src=${Agents.profilepicurl}><figcaption>${Agents.Fname}</figcaption></figure>
                </div>
            `;

        container.innerHTML += AgentCard;
    })
}

我现在遇到的问题是图像(来自 {Agents.profilepicurl})正在显示，而名称(来自 {Agents.Fname})没有显示。它显示“未定义”而不是名称，并且控制台中不显示任何错误。我做错了什么以及如何解决这个问题？

Answer 1

代码的前几行发生了一些奇怪的事情。您将“打开”监听器设置两次(忽略第一个监听器的结果快照)，并且正在等待身份验证并设置数据库对象而不使用它。我不太确定你想要实现什么目标，但这行得通吗？这是我认为您正在尝试使用当前代码执行的操作的简化版本:

console.log("Testing if the array values are here \n" + newarray);

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        document.getElementById("team").innerHTML = '';

        database = firebase.database();

        for (agentId of newarray) {
            var dbRef = database.ref().child('Agents').child(newarray[i]);
            dbRef.on('value', newAgents);
        }
    }
})

function newAgents(AgentSnap) { 
    var container = document.getElementById("team"); 

    var key = AgentSnap.AgentID;
    console.log(AgentSnap.key);
    var Agent = AgentSnap.val();
    var AgentCard = `
                <div class= "profilepics" id="${key}">
                <figure ><img src=${Agent.profilepicurl}><figcaption>${Agent.Fname}</figcaption></figure>
                </div>
            `;

        container.innerHTML += AgentCard;
    }