How to retrieve a value in Realtime Database using Javascript? - javascript

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>';
...

Related

display realtime database from firebase to html table

when i display the table my web app display undefined can someone help me please [realtime database
var database = firebase.database().ref().child('contact-#bluejetengineering/blue_jet/DB object Sensor');
database.once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var Sensor_1 = data.val().Sensor_1;
var Sensor_2 = data.val().Sensor_2;
var Sensor_3 = data.val().Sensor_3;
var Sensor_4 = data.val().Sensor_4
//content += '<tr>';
content += '<td>' + Sensor_1 + '</td>'; //column1
content += '<td>' + Sensor_2 + '</td>';//column2
content += '<td>' + Sensor_3 + '</td>';//column3
content += '<td>' + Sensor_4 + '</td>';//column4
content += '</tr>';
});
$('#ex-table').append(content);
}
});
</script>

Create HTML table with Firebase Data

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);
}
});

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

how to check if data is already in html table using firebase real time database?

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()
});

How to format value to Currency or Percent in AJAX

What is the best way of formating the values to percentage or currency from Ajax and display to a Table?
I'm currently developing an application which has Money values from SQL Server and need to be format from 3569.09 to $ 3, 569.09 and also from 24.55 to 24.55 % on the Table.
I have the tried THIS but still did not help.
Here is JS my Code:
function loadMarginBelow21() {
$.ajax({
url: "/Dashboard/MarginBelow21",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.Stock+ '</td>';
html += '<td>' + item.Price + '</td>'; //Must show Currency sign in the beguining like $5,664.00
html += '<td>' + item.Source + '</td>';
html += '<td>' + item.COST + '</td>';
html += '<td>' + item.Margin + '</td>'; // Must show % at the end of value
//html += '<td>Edit</td>';// | Delete</td>';
html += '<td>' +sdg + '</td>'
html += '</tr>';
});
$('.tbodyM').html(html);
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
Currently the table shows like:
Intl.NumberFormat is your friend. Create a new formatter with a locale and currency (I’ll assume you want US dollars here) and it’ll produce formatted strings.
let formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
let price = formatter.format(item.Price);
Given your sample data it looks like the percentage can just be added on to the end using string concatenation.

Categories