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
Related
I don´t have a lot of programming experience, and I´m trying to solve the following:
Given this data structure using Realtime Database
Data Structure
I want to show in an HTML table the value of the "propina" key, but not the identifier that the Realtime Database generates.
Up until now, I´m running this code to retrieve the values of the data:
`
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.nombre + '</td>';
content += '<td>' + val.lugar + '</td>';
content += '<td>' + val.ubicacion + '</td>';
content += '<td>' + val.propina + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});`
But the "propina" value is not displayed, giving me just \[object Object\] in the HTML.
The issue is that propina is an object, not a string or a number.
You need to access its value. You can access the value like this:
...
content += '<td>' + val.propina.value + '</td>';
...
JSON to HTML Table JavaScript Not Working
I've written this function to display the contents of the JSON file in an HTML table. However, it's returning as undefined.
I don't seem to be able to work out why this is happening. The console log displays the data just fine, but not the HTML table.
I'm wondering if it has something to do with the way arrays are parsed?
I want to keep the code short and clean, but wondering if there is a better way to do this without the undefined error. Maybe Vanilla JavaScript is better, using fetch?
Live page is found here: LBRYnomics
Thanks in advance!
jQuery(document).ready(function($) { $.getJSON('https://www.brendonbrewer.com/lbrynomics/subscriber_counts.json', function(data) {
var humanTimeSub = `${data.human_time_utc}`
$(".human-time-sub").html(humanTimeSub)
var sub_data = '';
$.each(data, function(key, value) {
sub_data += '<tr>';
sub_data += '<td>' + value.ranks + '</td>';
sub_data += '<td>' + value.vanity_names + '</td>';
sub_data += '<td>' + value.claim_ids + '</td>';
sub_data += '<td>' + value.subscribers + '</td>';
sub_data += '</tr>';
console.log(key + '=' + value);
});
$('#sub-stats').append(sub_data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sub-stats">
<tr>
<th>RANK</th>
<th>VANITY NAME</th>
<th>CLAIM ID</th>
<th>SUBS</th>
</tr>
</table>
You have multiple different arrays for each of those properties.
Assuming they are all in same relationship order you can loop over one of the arrays and use the iteration index to access corresponding elements from each of the other arrays.
Something like:
jQuery(document).ready(function($) { $.getJSON('https://www.brendonbrewer.com/lbrynomics/subscriber_counts.json', function(data) {
var humanTimeSub = `${data.human_time_utc}`
$(".human-time-sub").html(humanTimeSub);
var sub_data = '';
$.each(data.ranks, function(i, rank) {
sub_data += '<tr>';
sub_data += '<td>' + rank + '</td>';
sub_data += '<td>' + data.vanity_names[i] + '</td>';
sub_data += '<td>' + data.claim_ids[i] + '</td>';
sub_data += '<td>' + data.subscribers[i] + '</td>';
sub_data += '</tr>';
//console.log(key + '=' + value);
});
$('#sub-stats').append(sub_data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sub-stats">
<tr>
<th>RANK</th>
<th>VANITY NAME</th>
<th>CLAIM ID</th>
<th>SUBS</th>
</tr>
</table>
I think after inspecting the api it looks the items are put in different array with no connection but they have the same length. So assuming that attrbute1 at index N maps to attribute2 at index N and so on.
jQuery(document).ready(function($) { $.getJSON('https://www.brendonbrewer.com/lbrynomics/subscriber_counts.json', function(data) {
var humanTimeSub = `${data.human_time_utc}`
$(".human-time-sub").html(humanTimeSub)
var sub_data = '';
for(var i=0; i<data.ranks.length; i++){
//$.each(data.ranks, function(key, value) {
sub_data += '<tr>';
sub_data += '<td>' + data.ranks[i] + '</td>';
sub_data += '<td>' + data.vanity_names[i] + '</td>';
sub_data += '<td>' + data.claim_ids[i] + '</td>';
sub_data += '<td>' + data.subscribers[i] + '</td>';
sub_data += '</tr>';
//console.log(key + '=' + value);
//});
}
$('#sub-stats').append(sub_data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sub-stats">
<tr>
<th>RANK</th>
<th>VANITY NAME</th>
<th>CLAIM ID</th>
<th>SUBS</th>
</tr>
</table>
I have a firebase database set up that I need to create an HTML table with that necessary info. Below is how I have set up my firebase data.
{
"Markets" : {
"Athens" : {
"Item" : {
"name" : "Beef",
"price" : 10,
"salePrice" : 3
}
}
}
}
This is how I have my HTML table set up and my code to attempt to retrieve the data. The table is appropriately being created but I am not seeing any data. Any help would be greatly appreciated.
<table style="width:100%" id="ex-table">
<tr id="tr">
<th>Name:</th>
<th>Price:</th>
<th>Sale Price:</th>
</table>
<script>
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.name + '</td>';
content += '<td>' + val.price + '</td>';
content += '<td>' + val.salePrice + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
</script>
Right now you're reading the root node. There are a few more levels of data in your JSON before you get to the name, price and salesPrice properties. You'll either need to navigate those levels in your callback, or in your query. An example of the latter:
var database = firebase.database();
database.ref('Markets/Athens').once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr>';
content += '<td>' + val.name + '</td>';
content += '<td>' + val.price + '</td>';
content += '<td>' + val.salePrice + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
I have a live listener on my database data in my HTML table that is generated by javascript and when I add a new entry or delete an old entry, the data that was previously in the table gets duplicated.
var database = firebase.database().ref().child('transactions');
database.on('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var CustomerName = data.val().CustomerName;
var AmountSent = data.val().AmountSent;
var TimeEffected= data.val().TimeEffected;
var DateEffected = data.val().DateEffected;
var Successful = data.val().Successful;
content += '<tr>';
content += '<td>' + CustomerName + '</td>';//column2
content += '<td>' + AmountSent + '</td>'; //column1
content += '<td>' + TimeEffected + '</td>'; //column1
content += '<td>' + DateEffected + '</td>'; //column1
content += '<td>' + Successful + '</td>'; //column1
content += '</tr>';
});
$('#ex-table').append(content);
When it 'was database.once' and I had a refresh button I wouldn't get the data duplicated but I've changed it to'database.on' and now the data in the table duplicates whenever I do anything to the database.
I'm looking for the most cost-effective way.
I'm not sure which one of both 'database.once' or 'database.on' save money.
Since you listen to the value event on transactions, each time your callback is called the snapshot will contain all data under transactions. So any data that wasn't changed will also be in the snapshot, leading to it being in your table multiple times.
I see two options:
Wipe the table each time you get updated data
Perform more fine-grained updates
Wipe the table each time you get updated data
This is the simplest, since it requires the fewest changes to your existing code. Just clear the contents from the table whenever you get updated data from the database:
var database = firebase.database().ref().child('transactions');
database.on('value', function(snapshot){
$('#ex-table').empty(); // clear existing contents
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var CustomerName = data.val().CustomerName;
var AmountSent = data.val().AmountSent;
var TimeEffected= data.val().TimeEffected;
var DateEffected = data.val().DateEffected;
var Successful = data.val().Successful;
content += '<tr>';
content += '<td>' + CustomerName + '</td>';//column2
content += '<td>' + AmountSent + '</td>'; //column1
content += '<td>' + TimeEffected + '</td>'; //column1
content += '<td>' + DateEffected + '</td>'; //column1
content += '<td>' + Successful + '</td>'; //column1
content += '</tr>';
});
$('#ex-table').append(content);
This should work fine, but repaints the entire table contents every time anything in there changes. This may result in noticeable flicker when the table is large.
Perform more fine-grained updates
The alternative is to perform more fine-grained updates. I.e. initially you add all children, after that you only add the new children, remove any data that gets removed from the database, etc.
Firebase has specific events for this purpose, which fire one level lower in the database. For example, the child_added event is defined as "fires initially for each node under the reference, and then each time a node is added under the reference". In the same vein there are child_removed, child_changed and child_moved events. With these events you can perform more granular updates to the table.
For example, here's how you'd handle child_added:
var database = firebase.database().ref().child('transactions');
database.on('child_added', function(snapshot){
var data = snapshot.val();
var content = '<tr id="'+snapshot.key+'">';
content += '<td>' + data.CustomerName + '</td>';
content += '<td>' + data.AmountSent + '</td>';
content += '<td>' + data.TimeEffected + '</td>';
content += '<td>' + data.DateEffected + '</td>';
content += '<td>' + data.Successful + '</td>';
content += '</tr>';
$('#ex-table').append(content);
});
Aside from cleaning up the code a bit, I also add the snapshot.key to the tr. This allows you to later look up the row for a key, just in case you get a child_changed, or child_removed event.
For example, here's how to remove the row from the table when it gets removed from the database:
database.on('child_removed', function(snapshot){
$('#'+snapshot.key).remove()
});
I would like to ask some help, I'm a front-end developer and we currently have a project/task that is all about the back end. My team members decided to used firebase as a database in our web application. I can now send data to the database but I have a problem, I cant retrieve the data from firebase to the web application. I am planning to retrieve data and display it in my table (HTML).
This is my code in my javascript for retrieving data from firebase:
var database = firebase.database().ref().child('Tasks');
database.once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
var TaskTitle = snapshot.val().TaskTitle;
var JobId= snapshot.val().JobId;
snapshot.forEach(function(data){
});
content = '<tr>';
content += '<td>' + TaskTitle + '</td>'; //column1
content += '<td>' + JobId + '</td>';//column2
content += '</tr>';
}
$('#ex-table').append(content);
console.log(snapshot.val());
});
And this is my code in my HTML table to display the data from the database:
<table class="table table-striped" id="ex-table">
<thead class="thead-inverse">
<tr>
<th>Task Title</th>
<th>Category</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr id="tr">
<td id="titleTask"></td>
<td id="categoryTask"></td>
<td id="dateTask"></td>
<td id="statusTask"></td>
</tr>
</tbody>
I cant actually see the data that I have retrieved using the console in my web browser in chrome.
and it's displaying this: Data displayed in console while in my web app it's displaying like this: undefined
Can someone please help me, I'm new to everything your help is so much appreciated.
Your nesting is a bit wonky, and unfortunately it matters quite a lot where you put all the bits:
var database = firebase.database().ref().child('Tasks');
database.once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var TaskTitle = data.val().TaskTitle;
var JobId= data.val().JobId;
content += '<tr>';
content += '<td>' + TaskTitle + '</td>'; //column1
content += '<td>' + JobId + '</td>';//column2
content += '</tr>';
});
$('#ex-table').append(content);
}
});
In steps:
This loads the tasks from Firebase, with database.once().
Then if there are any tasks (one level indented), it loops over them (with snapshot.forEach(...)).
In that callback (so one more level indented) it takes the title and job id for that specific task, and adds it to the HTML string it is building.
The finally it adds the HTML to the table.
<table border="1" style="width:100%" id="ex-table">
<tr id="tr">
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Address</th>
<th>Username</th>
<th>Password</th>
</tr>
</table>
const starCountRef = ref(database, 'user_register/');
onValue(starCountRef, (snapshot) => {
snapshot.forEach(function (data) {
var val = data.val();
var content = '';
content += '<tr>';
content += '<td>' + val.student_id + '</td>'; //column1
content += '<td>' + val.first_name + '</td>';//column2
content += '<td>' + val.last_name + '</td>';//column2
content += '<td>' + val.email + '</td>'; //column1
content += '<td>' + val.address + '</td>';//column2
content += '<td>' + val.username + '</td>';//column2
content += '<td>' + val.password + '</td>';//column2
content += '</tr>';
$('#ex-table').append(content);
});
});