Question

＆＃13;

// Calls the onClick command from the Populate Button
function myFunctionPopulate() {

// Creates a new Firebase reference linking this JS to the Firebase database
var ref = new Firebase("https://project01-d018e.firebaseio.com/Numbers");

// Creates a snapshot of the data from the desired Firebase database and adds it to 'value' 
ref.on('value', function(snapshot) {

// Adds a console log of the data recived from Firebase
console.log(snapshot.val());

// Creates a variable called data to which the snapshot is saved
var data = snapshot.val();

for (var key in data) {
  
  if (data.hasOwnProperty(key)) {

    // Takes the id of the textbox and adds a value of (data[key]) where data = snapshot.val() which is the snapshot of the data
    document.getElementById('id1').value=(data[key]);

    // Adds a console log message to confirm the textbox has been populated
    console.log('Value Added');
    };
    // End of if
  }
  // End of for
});
// End of ref.on
}
// End of function

＆＃13;

<div id="button">
  <button id="RButton" value="submit" onclick="myFunctionPopulate()">Populate</button>
</div>

<div id="button2">
  <button id="RButton" value="submit" onclick="myFunctionClear()">Clear</button>
</div>

<div id="textBox">
  <form>
  From Firebase<br>
  <textarea rows="4" cols="50" id="id1"></textarea>
</form>
</div>

＆＃13;

我最近开始使用Google Firebase作为存储数据的存储解决方案。到目前为止一切都那么好 - 我喜欢它！

但是，我正在尝试将Firebase数据库中的数据显示到我的HTML网站中，该网站由2个按钮和一个textarea组成。 1个按钮用于填充文本区域，另一个用于清除。暂时非常简单。

目前，当我点击populate按钮时，onClick函数会执行这段JS：

JS Screenshot

****项目名称已更改为仅为示例****

Numbers - 此JS引用的内容 - 在Firebase控制台中显示如下：

Firebase Console Screenshot

当我点击填充按钮时，textarea填充在HTML中，但是，只显示Numbers中的最后一段数据，而不是整个列表。

如果可能，我希望将所有数据显示在此文本区域中。

如果有人能说清楚这一点，我会非常感激 - 我不确定这个问题是否与“关键”问题有关。 JS的一部分，因为我不确定这实际上是做什么的 - 这是GitHub工作的一个噱头，我已经调整到适合我的工作。

我现在已经附加了JS和HTML，虽然它不会工作，因为它不包含firebase脚本标记或firebase初始化标记，但希望文本更清晰

提前谢谢你， G

Answer 1

您只看到最后一段数据的原因是您在for循环的每次迭代中替换textarea的内容而不是附加它。运行以下代码段作为示例。在textarea id1我正在做你正在做的事情，并在textarea id2我附加当前值而不是替换它。

var data = ['first','second','third'];

for (var key = 0; key < data.length; key++) {
	document.getElementById('id1').value = data[key]
  document.getElementById('id2').value += data[key]
}

<textarea id="id1"></textarea>
<textarea id="id2"></textarea>

将Firebase数据检索到html页面中的文本框中的问题

1 个答案: