如何从firebase检索嵌套节点内容?

时间:2015-04-11 12:11:01

标签: javascript firebase

我有节点/person/<personid>/remarks/<remarkid>,其中包含字段remark,by,date。

如何检索一个简单的列表,其中包含每个人的每条评论的备注,日期和日期,以便将它们放入html表格中?

我试图用https://www.firebase.com/docs/web/guide/retrieving-data.html上的文字弄清楚,但我完全被卡住了。到目前为止我得到的是:

<html>
<head>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>
        table, th, td { border: 1px solid black }
    </style>
</head>
<body>
<div id="tablearea"></div> 
<script>

    var leerlingRef = new Firebase("https://mydatabase/leerling/116978/opmerkingen");
        leerlingRef.on("value", function(snapshot) {
            snapshot.forEach(function(data) {
                console.log(data.key() + " " + data.val());
            });
        }); 

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我有点需要咖啡。解决方案如下。我必须找到的事情之一就是在节点opmerking中用一个像-Jm_NZnFtaWy2tAaAzlo这样的id来解决一个字段,例如: data.val()。opmerking(用于在子节点内部使用键-Jm_NZnFtaWy2tAaAzlo在一个节点内进行opmerking的孩子......)。

这也有助于找出如何处理$(#“等: http://www.w3schools.com/jquery/jquery_dom_add.asp

<html>
<head>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>
        table, th, td { 
            border: 1px solid #77B655; 
            text-align: left;
            vertical-align: top;
        }
        #opmtable { 
            width: 100%; 
            border-radius: 5px;
        } 
        #tablearea { 
            border-radius: 5px;
            height: 300px;
            width: 400px;
        }

    </style>
</head>
<body>
<form id="myform">
    <select id="leerling">
        <option value='Selecteer...'>Selecteer...</option>
        <option value='116978'>116978 Anne Test             (H5H1)</option>
        <option value='127225'>127225 Joep Test             (H5H1)</option>
    </select>
</form>
<div id="tablearea" >
    <table id="opmtable" cellspacing="0">
        <thead>
            <th>opmerking</th>
            <th>bestanden</th>
            <th>door</th>
        </thead>
        <tbody id="opmtablebody">
        </tbody>
    </table>
</div> 
<script>
    $(document).ready(function(){
        $("#leerling").change(function(){
            $(this).css("background-color", "lightblue");
            if (this.value !== "Selecteer...") {
                toonOpmerkingen(this.value);
            } else {
                $("#opmtablebody").html("");
            }
        });
    });

    var toonOpmerkingen = function(leerling) {
        var ref = new Firebase("https://mydatabase.firebaseio.com/leerling");
        var leerlingRef = ref.child(leerling).child("opmerkingen");

        leerlingRef.on("value", function(snapshot) {
            $("#opmtablebody").html("");
            snapshot.forEach(function(data) {
                var cel1 = data.val().opmerking;
                var cel2 = data.val().bestanden;
                var cel3 = data.val().door;
                var tr = "<tr><td>"+cel1+"</td><td>"+cel2+"</td><td>"+cel3+"</td></tr>";
                $("#opmtablebody").append(tr);
            });
            }, function (errorObject) {
             console.log("The read failed: " + errorObject.code);
            });
    }
</script>
</body>
</html>