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

Question

// 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

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

我最近开始使用 Google Firebase 作为存储数据的存储解决方案。到目前为止一切顺利 - 我很喜欢它!

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

目前，当我点击填充按钮时，onClick 函数会执行这段 JS:

JS Screenshot

****项目名称已更改为只是为了示例****

数字 - 此 JS 引用的数字 - 在 Firebase 控制台中看起来像这样:

Firebase Console Screenshot

当我点击填充按钮时，文本区域会填充到 HTML 中，但是，仅显示 Numbers 中的最后一段数据，而不是整个列表。

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

如果有人能阐明这一点，我将非常感激 - 我不确定这个问题是否与 JS 的“Key”部分有关，因为我不确定这实际上是做什么的 - 这是一个来自 GitHub 作品的片段，我已对其进行了调整以适合我的工作。

我现在已经附加了 JS 和 HTML，尽管它不起作用，因为它不包含 firebase 脚本标签或 firebase 初始化标签，但希望文本能让它更清晰

预先感谢您，G

Answer 1

您只看到最后一条数据的原因是您在 for 循环的每次迭代中替换文本区域的内容，而不是附加它。运行以下代码片段作为示例。在 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>