Issue JavaScript (JS) retriving data from firebase using a loop

Question

I have a big issue when i'm trying to get values from firebase and update content from a part of the html code. For that I'm using a for to get the route to the data.

$(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

                }
            }

        });

On the console output I get this:

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

I deduced that it only update the last var that I get. The result in the html is: Webpage

I expected to check every time that variables and print in a webpage. Here is the structure from the firebase:

Firebase structure

You probably don't want to use `on()` here, since it attaches a listener permanently until you remove it.. Use `once()` to get data a single time. https://firebase.google.com/docs/database/web/read-and-write#read_data_once — Doug Stevenson, Dec 05 '19 at 22:16
The problem is when I'm trying to execute the db.ref(searc)... part, it's not sync with the rest of the code and only update me the last var that I get. I want to update all. — Teodor Din, Dec 05 '19 at 22:19

score 0 · Accepted Answer · edited Dec 07 '19 at 01:36

You'll need a closure/self-invoking function to capture the value of srSn and srMv, as explained in Javascript infamous Loop issue? and What is the purpose of a self executing function in javascript?.

The simplest way to do that is to extract the code that interacts with Firebase into a named function and pass in the values of srSn and 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

}

Issue JavaScript (JS) retriving data from firebase using a loop

1 Answers1