使用jQuery从Firebase取数据并渲染到HTML列表的问题排查

问题描述 #

我尝试编写jQuery脚本从Firebase数据库读取数据，将Upbeat节点下tunings和tuningSongs数组的每个值转为<li>标签，追加到对应<ul>中，但当前代码未实现预期效果。

数据库初始化代码 #

firebase.initialize({
    projectName: "vibetune"
});

var database = firebase.database();

var vibes = {
    Upbeat:{
        tunings:["E Standard", "E Flat Standard", "Drop D"],
        tuningSongs:["Everlong", "My Generation", "Jailhouse Rock"]
    },
    Sad:{
        tunings:["Drop D Flat", "DADGAD","DAEAC#E"],
        tuningSongs:["Micheline", "Lost in Hollywood", "Emo Song"]
    },
    Mellow:{
        tunings:["CGCGCD", "FACGCE", "Open G"],
        tuningSongs:["An Island", "Never Meant", "Daughter"]
    },
    Heavy:{
        tunings:["D Standard", "Drop C", "AGCFAD"],
        tuningSongs:["Blood and Thunder", "Monster", "Alpha"]
    },
    Experimental:{
        tunings:["Ostritch Tuning", "Open C", "Nick Drake Tuning"],
        tuningSongs:["Venus in Furs", "Moon Song", "Pink Moon"]
    }
};

for(var vibe in vibes){
    database.ref(vibe).set({
        tunings:vibes[vibe].tunings,
        tuningSongs:vibes[vibe].tuningSongs
    })
}

HTML页面代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Vibe Tune</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap')</style>
        <script src="https://static.codehs.com/cdn/latest/chsfirebase/chsfirebase.min.js"></script>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
       <img class="pgimg" alt="upbeat" src="https://lh3.googleusercontent.com/drive-viewer/AEYmBYSy_Rh7voLgctZUSBK5N3plPbZ9NWRHK4kozjAZEsAoeWZ_7zkDXtHQZIOHHbRsdQJ-DZszI_ccNCqhODnDx__wPql5pQ=s2560?source=screenshot.guru">
       <h1 class="pgtitle">Upbeat Tunings</h1>
       <h3 class="pgsub">Tunings for a happy vibe</h3>
       
       <div id="upbeat">
           <h3>Tunings</h3>
           <ul id="tunings">
               
           </ul>
           
           <h3>Songs for Tunings</h3>
           <ul id="songsfortunings">
               
           </ul>
       </div>
       
       <h4><a href="index.html"><i>Back to Home</i></a></h4>
       
       <script>
            $(document).ready(function(){
               firebase.initialize({
                    projectName: 'vibetune'
               });
                              
                //function updateUpbeatData(){
                    var database = firebase.database();
                    var upRef = database.ref("Upbeat");
                    
                    console.log("attemping to fetch data...");
                    
                    upRef.on("value", function(snapshot){
                        console.log("Snapshot: ", snapshot.val());
                        var nodeData = snapshot.val();
                        
                        if(nodeData != null){
                            console.log("Node data exists: ", nodeData);
                            $("#tunings").empty();
                            $("#songsfortuning").empty();
                        
                            if(nodeData.tunings){
                                nodeData.tunings.forEach(function(tuning){
                                    $("#tunings").append("<li>" + tuning + "</li>");
                                });
                            }
                            if (nodeData.tuningSongs){
                                nodeData.tuningSongs.forEach(function(song){
                                    $("#songsfortunings").append("<li>" + song + "</li>");
                                });
                            }
                        }
                        else{
                            console.log("No data found at the specified reference.");
                        } 
                    });
                //}
               //updateUpbeatData();
            });
       </script>
       <script src="scripts.js"></script>
    </body>
</html>

错误原因及修复方案 #

1. DOM元素ID拼写错误 #

代码中清空歌曲列表时使用了错误的ID：

$("#songsfortuning").empty();

而页面中对应的<ul>ID是songsfortunings（末尾多一个s），这会导致清空操作失效，甚至在控制台抛出找不到元素的错误。

2. Firebase数组转对象导致forEach失效 #

Firebase Realtime Database存储数组时，会自动将其转换为带数字索引的对象（例如{0: "E Standard", 1: "E Flat Standard", ...}），这种对象没有原生forEach方法，导致遍历代码无法执行。需要将对象转换回数组。

修复后的脚本代码 #

$(document).ready(function(){
    firebase.initialize({
        projectName: 'vibetune'
    });
                      
    var database = firebase.database();
    var upRef = database.ref("Upbeat");
    
    console.log("attemping to fetch data...");
    
    upRef.on("value", function(snapshot){
        console.log("Snapshot: ", snapshot.val());
        var nodeData = snapshot.val();
        
        if(nodeData != null){
            console.log("Node data exists: ", nodeData);
            $("#tunings").empty();
            // 修正ID拼写错误
            $("#songsfortunings").empty();
        
            if(nodeData.tunings){
                // 将Firebase返回的对象转为数组
                var tuningsArray = Object.values(nodeData.tunings);
                tuningsArray.forEach(function(tuning){
                    $("#tunings").append("<li>" + tuning + "</li>");
                });
            }
            if (nodeData.tuningSongs){
                // 将Firebase返回的对象转为数组
                var songsArray = Object.values(nodeData.tuningSongs);
                songsArray.forEach(function(song){
                    $("#songsfortunings").append("<li>" + song + "</li>");
                });
            }
        }
        else{
            console.log("No data found at the specified reference.");
        } 
    });
});

内容的提问来源于stack exchange，提问作者TheNoob