如何从Firebase读取数据并将其写入文本框javascript

How to read data from firebase and write it in textboxs javascript

本文关键字：文本 javascript Firebase 读取 数据      更新时间：2023-09-26

我正在从我的Firebase数据库中读取很多不同的数据，目前，我已经对其进行了硬编码。这工作正常，但是我有太多的代码行，现在当我想更改我的代码时，它会变得非常混乱。下面我粘贴了我采取的当前分配。

var ref = new Firebase("URL");
// Data set 1
ref.on('child_added', function(snapshot) {
var snapshot = snapshot.val();    
textbox1.innerHTML = snapshot.getvalue1.age;
});
ref.on('child_changed', function(snapshot) {
var snapshot = snapshot.val();   
textbox1.innerHTML = snapshot.getvalue1.age;  
});
// Data set 2
ref.on('child_added', function(snapshot) {
var snapshot = snapshot.val();    
textbox2.innerHTML = snapshot.getvalue2.age; 
});
ref.on('child_changed', function(snapshot) {
var snapshot = snapshot.val();   
textbox2.innerHTML = snapshot.getvalue2.age;    
});

..... ..... .....

// Data set 100
ref.on('child_added', function(snapshot) {
var snapshot = snapshot.val();    
textbox100.innerHTML = snapshot.getvalue100.age; 
});
ref.on('child_changed', function(snapshot) {
var snapshot = snapshot.val();   
textbox100.innerHTML = snapshot.getvalue100.age;   
});

而不是我采取的方法，是否可以使用 for 循环或类似的东西来循环每个数据，因为我在 firebase 中每个文本框/关键字的结构或多或少是相同的。

我对

javascript相当陌生，但根据我对java的了解，我相信它会从这样的事情开始;

var myTextbox = document.getElementById("mytextbox"); 
for (var i = 0; i < myTextbox.length; i++) {
}

欢迎任何帮助，如果我的问题不清楚，请告诉我。

编辑：

Mydata:
textbox1 - value - age : "This is textbox 1, age:21"
textbox2 - value - age : "This is textbox 2, age:53"
textbox2 - value - age : "This is textbox 3, age:04"
....
....

我不是火力专家，但这里有一些潜在的解决方案你可以尝试。例如，您可以使用"value"，而不是编写child_added和child_changed。（参考资料） 

ref.on('value', function(snapshot) {
var snapshot = snapshot.val();    
textbox1.innerHTML = snapshot.getvalue1.age;
});

但这不是您的问题的好解决方案，因为您希望一次检索所有值。似乎您的快照具有属性'getValuei'的所有值，其中 i 来自 1...n。更好的解决方案可能是这样的。

ref.on('value', function(snapshot) {
var snapshot = snapshot.val();    
textbox1.innerHTML = snapshot.getvalue1.age;
textbox2.innerHTML = snapshot.getvalue2.age;
textbox3.innerHTML = snapshot.getvalue3.age; //..and so on..
});
相关文章：