Displaying data from firebase databse to html table

Coding Help
1

Hello.I previously made a post and it led me to this point but I seem to be getting no where. It may be a problem of where I’m aiming in the database. Thank you in advance.



Hello!



  </head>  
  <body>
<script src="jquery-3.3.1.min.js"></script>


    
    
    <table id ="orders" style ="width:50%">
      <tr>
        <th>Order</th>
        <th>name</th>
        <th>order No.</th>
        <th>Items</th>
        <th>Price</th>
      </tr>
      
    </table>
  </body>
</html>
<style>
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

#orders{
 border:2px solid black; 
}
th{
 border: 1px solid black;
  border-left:none;
  border-right:none;
}


</style>
    <script>
    var config = {
        apiKey: "*****",
        authDomain: "mycanteenapp-b0dfc.firebaseapp.com",
        databaseURL: "https://mycanteenapp-b0dfc.firebaseio.com",
        projectId: "mycanteenapp-b0dfc",
        storageBucket: "mycanteenapp-b0dfc.appspot.com",
        messagingSenderId: "18960278720"
      };
      firebase.initializeApp(config);
      
      console.log("hello")
 var database = firebase.database(MyCanteen);
    database.ref(break).once('value', function(snapshot){
        console.log("hello")
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                content +='<tr>';
                content += '<td>' + val.Order + '</td>';
                content += '<td>' + val.name + '</td>';
                content += '<td>' + val.orderNo + '</td>';
                content += '<td>' + val.Items + '</td>';
                content += '<td>' + val.Price + '</td>';
                content += '</tr>';
            });
            $('#orders').append(content);
        }
    });  

  
  
  
  
  
  
  
  /*var messagesRef = new Firebase('https://mycanteenapp-b0dfc.firebaseio.com"');
messagesRef.limitToLast(10).on('child_added', function (snapshot) {
    var data = snapshot.val();
    var message = data.text;

    if (message != undefined)
    {
      messageResults.value += '\n' + message;
    }
});*/
</script>

MOD EDIT: remove sensitive data

2

Hey @The-father-of-storms it would make things a little easier for the Glitch team if you could let us know what project you’re working on - that way we’d have a starting place to take a look, since none of us are that familiar with its ins and outs.

3

Sure the project name is: ref-project

4

Ok! If you look at your browser console I think you’ll see that there’s a syntax error in your javascript where you try to set your firebase database ref. I’m not sure what you’re expecting there, but the Firebase database documents seem to indicate that when setting that ref you need to identify what path from your data structure you’re hoping to read. It would probably help a lot to know what your data structure looks like, since a lot of the method calls seem to require knowledge of the structure of the data being queried.

Since there’s a syntax error in the JavaScript, none of it is actually executed, which is why you’re never seeing your console.log() output.

5

So would you be able to help me if I provided my json structure?

6

I can’t guarantee when we might be able to take a look, but I don’t know that we can offer much specific help at all without it.

You also might try some of the Firebase support forums or their Slack channels - you might find users with better and more immediate knowledge there.

7

I’ll try that then. Thanks for all the help!