Javascript:将数据从 Firebase DB 加载到生成的输入字段中

Question

这是我的数据结构:

使用 Total (这是 R 又名路由的计数)，我使用此处的代码生成 3 个输入框:

var rootRef = firebase.database().ref().child('Lane').child('Total')

function calcVelocity(snapshot) {
   var td;

   td = snapshot.val();

   return td;
}

function getVelocity() {
   return rootRef.once('value').then(calcVelocity);
}

getVelocity().then(function(vel) {
    for(i =0; i < vel; i ++){
        document.getElementById("insert_lanes").innerHTML +=  '<input type="text" class="form-control" id="R'+i+'" name="Schoolname[]" value="" placeholder="Freq Rank"><br>'
    }

它工作正常，有 3 个输入框生成，id 为 R1 R2 R3。

<小时/>

现在加载数据:

function f1(snapshot){
    var hol;
    hol = snapshot.val();
    return hol
}

function f2(i){
    return firebase.database().ref('Lane/R'+i+"/Dest").once('value').then(f1)
}

for(y =0; y<3; y++){
f2(y).then(function(veg){
    document.getElementById("R"+y).value = veg;
})
}

这会引发错误未捕获(在 promise 中)TypeError:无法设置 null 的属性“值”

但是，当我只为其中一个执行此操作时，它会起作用:

function f1(snapshot){
    var hol;
    hol = snapshot.val();
    return hol
}

function f2(i){
    return firebase.database().ref('Lane/R'+i+"/Dest").once('value').then(f1)
}

y=1
f2(y).then(function(veg){
    document.getElementById("R"+y).value = veg;
})

我不明白出了什么问题。

Answer 1

我将把我的回答分为两部分:问题和解决方案。

问题 1

问题出在 firebase 函数的异步调用上。让我们进行一些挖掘，这将使事情变得清晰。我添加了一些控制台输出来查看它的去向。请注意，我还在这些函数外部声明了 y 来跟踪循环迭代。

var y = 0;

function f1(snapshot) {
    console.log("in f1", y);
    var hol;
    hol = snapshot.val();
    console.log("in f1 hol", hol, y);
    return hol;
}

function f2(i) {
    console.log("in f2", y);
    return firebase.database().ref('Lane/R' + i + "/Dest").once('value').then(f1);
}

for (; y < 3; y++) {
    console.log("in for", y);
    f2(y).then(function(veg) {
        console.log("resolved", y);
        document.getElementById("R" + y).value = veg;
        console.log(y);
    })
}

当您运行此命令时，输出将如下所示:

仅当 firebase 的异步调用得到解析时，f1 函数才会运行(then 执行此操作)。因此，假设该请求进入某个队列，但这不会阻止其他函数执行，因为工作已经完成并且请求已由 f2 发出。如果您看到图像并将其与代码关联起来，您将看到当 y 值递增并达到 时，我们开始从 firebase 获取响应3..然后执行 document.getElement ，但只考虑 y 的最终值，所有其他值现在都已过去。在其他情况下，可能会发生这种情况，在 for 循环结束时可能会得到/不会得到解决。这会导致不一致。

对于一个值来说，这是很简单的，因为只有一个值需要解析，并且一个相应的字段需要填充。所以不存在不一致的情况。简而言之，这是不可预测的。

问题2

让我们回顾一下另一个并发问题。显然，当您访问输入字段来填充它们时，它们甚至不存在!它们尚未添加到 DOM 中。这又是解决回调或 promise 的复杂情况。这可能就是为什么会出现 Uncaught (in Promise) TypeError: Cannot set property 'value' of null 的原因。

解决方案

看一下下面的代码。我尝试尽可能少地改变并使其发挥作用。

获取速度

getVelocity().then(function(vel) {
    //pass the value of Total in vel

    for (var i = 0; i < vel; i++) { //vel = 5
        document.getElementById("insert_lanes").innerHTML += '<input type="text" class="form-control" id="R' + i + '"><br>';
    }
    // the input fields are created R0, R1, ...... 
    loadSnapshot(); //calling the next function
});

之后

var laneRef = firebase.database().ref('/Lane');

var getSnap = function(){
    return laneRef.once('value');
}

function loadSnapshot(){
    getSnap().then(fillInputFields);
}

function fillInputFields(snapshot){
    for(var i=0; i<5; i++) {
        var v = snapshot.child('R'+i).child('Dest').val();
        // console.log(v);
        // console.log((document).getElementById('R'+i));
        document.getElementById('R'+i).value = v;
    }
}

我希望这会起作用!尝试一下。