Question

我从Firebase制作了一系列数据，并想在我的网站上显示它。它工作正常一次，但是当Firebase更新时，网站不会相应更新。我的目标是制作更新列表。因此，当数据库更新时，新更新将显示在上一个上面。

的console.log（ARR）;记录数据库中的每个更改，所以基本上我想要控制台显示的内容..

JS代码：

firebase.initializeApp(config);
  database = firebase.database();
  
  var ref = database.ref("users");
  ref.on("value", gotData, errData);
  
  function gotData(data) {
   // console.log(data.val);
   var users = data.val();
   var keys = Object.keys(users);
   //console.log(keys);
  
   for (var i = 0; i < keys.length; i++) {
    var k = keys [i];
    var name = users [k].Name;
    var gender = users [k].Gender;
    var car = users [k].Car;
    var location = users [k].Location;
    var destination = users [k].Destination;
    
    
    // initialize array
var arr = [
    name,
    gender,
    car,
    location,
    destination,
];



// append new value to the array
arr.push(destination);

 document.getElementById('B1').innerHTML = JSON.stringify(arr);
console.log(arr);

 
   }
  }
  
  function errData(err) {
    console.log("Error");
    console.log(err);
  }

<!DOCTYPE html
<html>
    <head
         <meta charset="utf-8">
         <title>Test</title>
         <script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
    </head>
    <body>
        Test
        <!-- Value -->
        <ol id="B1"></ol>
        
       <script src ="App.js"></script>
        </body>
</html>

Firebasestructure：

应用
- 用户
  - 09IEbFijEnQpDita5DyhUdBE0eD3
    - 姓名：“尼克”
    - 汽车：“奥迪”
    - 性别：“男性”
    - 位置：“首页”
    - 目的地：“海滩”

是否有一种良好的（并且希望不复杂）达到目标的方式？

谢谢。

Answer 1

您正在每次迭代中重置数组，而您确实希望保留之前迭代中的数据。因此，在进入循环之前对数组进行初始化，并且只在循环内添加它。以同样的方式在每次迭代中覆盖HTML元素中的输出。相反，在循环中累积数据并仅在循环后输出数组：

function gotData(data) {
    var users = data.val();
    var keys = Object.keys(users);

    // initialize array here
    var arr = [];
    for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var name = users[k].Name;
        var gender = users[k].Gender;
        var car = users[k].Car;
        var location = users[k].Location;
        var destination = users[k].Destination;
        // append new value to the array
        arr.push([
            name,
            gender,
            car,
            location,
            destination,
        ]);
    }
    // And now output:
    document.getElementById('B1').innerHTML = JSON.stringify(arr);
    console.log(arr);
}

使用Object.values（假设您需要所有数据字段）可以缩短所有这些时间：

function gotData(data) {
    var arr = Object.values(data.val()).map(Object.values);
    document.getElementById('B1').innerHTML = JSON.stringify(arr);
    console.log(arr);
}

如果您想要输出顶部的最后一个值，请使用reverse方法，如果您希望采用列表格式，则map将值li标记为slice。最后，您可能希望将行数限制为某个常量（例如10），您可以使用function gotData(data) { var arr = Object.values(data.val()).map(Object.values); B1.innerHTML = arr.slice(-10).reverse().map(val => `<li>${val}</li>`).join(''); }执行此操作：

document.getElementById

请注意，您现在并不需要id，因为浏览器会为具有B1属性的每个元素声明全局变量。所以你可以使用@media (min-width: 500px) { .table-responsive { overflow-x: hidden !important; } }变量。

将数组从JavaScript推送/更新为HTML

1 个答案: