无法让 Firebase 数据显示在有序列表中答案

【问题标题】：cannot get Firebase data to show in ordered list无法让 Firebase 数据显示在有序列表中
【发布时间】：2022-10-04 22:23:08
【问题描述】：

我试图将我的 firebase 数据放入有序列表中。当我添加更多数据时，我会得到数据和有序列表更新。但它不只显示数字的数据内容。 ii 尝试将子 li 附加到父 ol，它似乎可以工作，但内容只是不显示。 `

const firebaseConfig = {
    apiKey: "AIzaSyB3lyujRu2g_szT-r0GZF4T12MrzGZJHg8",
    authDomain: "beer-database.firebaseapp.com",
    databaseURL: "https://beer-database-default-rtdb.firebaseio.com",
    projectId: "beer-database",
    storageBucket: "beer-database.appspot.com",
    messagingSenderId: "237719564948",
    appId: "1:237719564948:web:a16916d042fd96c874ba81",
    measurementId: "G-KHGHBKCJF7"
  };
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Set database variable
var database = firebase.database()

var ref = database.ref('Beers');
ref.on('value',gotData, errData);

function save() {
  var name = document.getElementById('name').value
  var abv = document.getElementById('abv').value
  var company = document.getElementById('company').value
  var description = document.getElementById('description').value
  var category = document.getElementById('category').value

  database.ref('Beers/' + name).set({
    name : name,
    abv : abv,
    company : company,
    description : description,
    category : category
  })

  alert('Saved')
}

function get() {
  var name = document.getElementById('name').value

  var name_ref = database.ref('Beers/' + name)
  name_ref.on('value', function(snapshot) {
    var data = snapshot.val()

    alert(data.name)

  })

}

function update() {
  var username = document.getElementById('name').value
  var email = document.getElementById('email').value
  var password = document.getElementById('password').value

  var updates = {
    email : email,
    password : password
  }

  database.ref('users/' + username).update(updates)

  alert('updated')
}

function remove() {
  var name = document.getElementById('name').value

  database.ref('Beers/' + name).remove()

  alert('deleted')
}

function gotData(data){

  
    //console.log(data.val());
    var Beers = data.val();
    var keys = Object.keys(Beers);
    console.log(keys);
    for(var i=0; i < keys.length; i++){

        var k = keys[i];
        var name = Beers[k].name;
        var abv = Beers[k].abv;
        var company = Beers[k].company;
        var description = Beers[k].description;
        var category = Beers[k].category;
       
       
        // console.log(name,abv,company,description,category)
        var li = document.createElement('li', name + ': ' + company + ': ' + abv + ': ' + description + ': ' + category);
      
        document.getElementById("beerlist").appendChild(li);
    }
}

function errData(err){
    console.log('Error!');
    console.log(err);
}

<html>
<head>
<title>firebase editable table </title>
</head>


<body>
    <p>
        <div>
        <ol id="beerlist">
        
        </ol>
        </div>
    </p>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/p5@1.4.2/lib/p5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-database.js"></script>
<script src="index.js"></script>
</body>
</html>

强调文本`

【问题讨论】：

标签： javascript firebase firebase-realtime-database

【解决方案1】：

我不确定这是否是您的问题的原因，但gotData 似乎过于复杂。不要使用 for 循环和复杂的索引查找，而是考虑使用 Firebase 的内置 forEach，如下所示：

function gotData(snapshot){
    document.getElementById("beerlist").innerHTML = ""; // ? clear previous child nodes

    snapshot.forEach((child) => {
        const data = child.val()

        var li = document.createElement('li', data.name + ': ' + data.company + ': ' + data.abv + ': ' + data.description + ': ' + data.category);
        document.getElementById("beerlist").appendChild(li);
    }
}

【讨论】：