使用循环发出 JavaScript (JS) 从 firebase 检索数据

Question

当我尝试从 firebase 获取值并从 html 代码的一部分更新内容时，我遇到了一个大问题。 为此，我使用 for 来获取数据的路径。

$(document).ready(function(){
            var db = firebase.database();  
            var pos = ['der','mid', 'izq'];
            var pl = 1;
            var dataT = ['sonido', 'mov'];
            for( var pl = 1; pl<4; pl++) {
                for(var i = 0; i < 3; i++){
                    var search = 'insti/planta'+pl+'/'+pos[i];
                    var srSn = 'pl'+pl+'-pos-'+pos[i]+'-data-sonido';
                    var srMv = 'pl'+pl+'-pos-'+pos[i]+'-data-mov';

                    db.ref(search).on("value",function(snap){    //WeMos1   
                        console.log(srSn);
                        console.log(srMv);
                        console.log(pl);
                        console.log(pos[i]);
                        sonido = snap.val().sonido;
                        mov = snap.val().mov;
                        console.log("sonido: "+sonido);
                        console.log("mov: "+mov);
                        document.getElementById(srSn).innerHTML = "Sonido = "+sonido;
                        document.getElementById(srMv).innerHTML = "Movimiento: "+mov.toString();;

                    }); //FIN WeMos1

                }
            }

        });

在控制台输出我得到这个：

 VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 123 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 341 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 672 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 312 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 511 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 622 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 12 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 331 VM5537:46 mov: no VM5537:39 pl3-pos-izq-data-sonido VM5537:40 pl3-pos-izq-data-mov VM5537:41 4 VM5537:42 undefined VM5537:45 sonido: 623 VM5537:46 mov: no

我推断它只更新我得到的最后一个变量。 html中的结果是：网页

我希望每次都检查变量并打印在网页上。 这是firebase的结构：

Firebase 结构

Answer 1

您需要一个闭包/自调用函数来捕获srSn和srMv的值，如Javascript 臭名昭著的 Loop 问题中所述？ 和javascript 中自执行函数的目的是什么？ .

最简单的方法是将与 Firebase 交互的代码提取到一个命名函数中，并传入srSn和srMv的值：

$(document).ready(function(){
    var db = firebase.database();  
    var pos = ['der','mid', 'izq'];
    var pl = 1;
    var dataT = ['sonido', 'mov'];
    for( var pl = 1; pl<4; pl++) {
        for(var i = 0; i < 3; i++){
            var search = 'insti/planta'+pl+'/'+pos[i];
            var srSn = 'pl'+pl+'-pos-'+pos[i]+'-data-sonido';
            var srMv = 'pl'+pl+'-pos-'+pos[i]+'-data-mov';
            updateUI(search, srSn, srMv);
        }
    }
});

function updateUI(search, srSn, srMv) {
    db.ref(search).on("value",function(snap){    //WeMos1   
        sonido = snap.val().sonido;
        mov = snap.val().mov;
        document.getElementById(srSn).innerHTML = "Sonido = "+sonido;
        document.getElementById(srMv).innerHTML = "Movimiento: "+mov.toString();;
    }); //FIN WeMos1

}