2015-04-11 4 views
0

У меня есть узлы /person/<personid>/remarks/<remarkid> с этими полями замечание, по дате.Как получить содержимое вложенных узлов из firebase?

Как получить простой список, содержащий примечание, по дате каждого примечания каждого человека, чтобы разместить их в 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

Я исправил его после чашки эспрессо. Спасибо в любом случае! – user1837293

ответ

1

Я был чем-то вроде кофе. Решение ниже. Среди вещей, которые я должен был выяснить, было обращение к полю в узле opmerking с идентификатором типа -Jm_NZnFtaWy2tAaAzlo с, например. data.val(). opmerking (для ребенка, 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> 
Смежные вопросы