How can I fetch the data in a single row

I am tying to fetch the data from firebase just like make single row of first element of all the headings in firebase database. i.e first element of Amount, key, time, total, Number should make a single row and then so on.

I am trying with foreach loop but I can refer to the correct refrence of firebase

//html code
<table style="width:100%" id="ex-table">
  <tr id="tr">
    <th>Amount</th>
    <th>Key</th> 
    <th>Number</th>
    <th>Time</th>
    <th>Total</th>

 </table> 


//Javascript code
var database = firebase.database();

database.ref().once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        snapshot.forEach(function(data){
            var val = data.val();
            content +='<tr>';
            content += '<td>' + val.Amount + '</td>';
            content += '<td>' + val.Key + '</td>';
            content += '<td>' + val.Number + '</td>';
            content += '<td>' + val.Time + '</td>';
            content += '<td>' + val.Total + '</td>';
            content += '</tr>';
        });
        $('#ex-table').append(content);
    }
});

I am getting undefined instead of values