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);
});
});
I am trying to show data from 5 rows of Database (MySQL) to rows of table using on success of jQuery AJAX call. The data is in JSON format.
Issue: I am not able to figure out to get all of those rows. I can get only one row but console showed me all the rows in JSON format.
$.ajax({
url: '<?php echo base_url('ads/select_post'); ?>',
data: {},
dataType: "json",
cache: false,
success: function (data) {
$.each(data, function (i, val) {
console.log(val.name);
$("#name").html(val.name);
$("#price").html(val.price);
$("#addr").html(val.addr);
$("#des").html(val.des);
$("#viewed").html(val.viewed);
$("#status").html(val.status);
});
}
});
Console output:
[{"name":"dfasdfas","price":"0","addr":"dfasdfas","des":"sadfdfasdfasdf","viewed":"0","img":"","status"
:"1"},{"name":"Heng","price":"0","addr":" dflkas;df","des":"asdfasdf"
,"viewed":"0","img":"","status":"1"},{"name":"asdDasdA","price":"0","addr":"asdADasd","des":"ASDasdASD"
,"viewed":"0","img":"","status":"1"},{"name":"asdfas","price":"0","addr":"fasdfas","des":"dfasdf","viewed"
:"0","img":"","status":"1"},{"name":"asdf","price":"0","addr":"asdfasdfas","des":"asdfasdfasdf","viewed"
:"0","img":"","status":"1"}]
HTML of the table i am sending data to,
<tbody id="items">
<tr>
<td>1</td>
<td><a><div id="name"></div> </a></td>
<td><a><div id="price"></div> </a></td>
<td><a><div id"addr"></div></a></td>
<td><div id="des"></div> </td>
<td><a><div id="viewed"></div></a></td>
<td><a><div id="status"></div></a></td>
</tr>
Please advise.
Lots of good answers, but since I've created an example I'll post that too. If nothing else it might give you, or someone else, an alternative solution. I'm using classes instead of Id's, and keep your original structure.
Since this was accepted as answer I should also mention why your code failed:
Your each loop is continually overwriting the contents of your table row data, instead of creating new rows. Another thing that needed fixing is that you had given the columns Id's, and those cannot stay (as they were) if you want to repeat the rows, since Id's within a page must be unique.
There are many methods to create new elements. I chose clone() as I figure you would always have a row for header that could easily be used to clone/copy. Also I added a unique Id attribute to each tr. These are not really used in the current implementation below, but it might be good to have as reference later in your project.
var data = [{"name":"dfasdfas","price":"0","addr":"dfasdfas","des":"sadfdfasdfasdf","viewed":"0","img":"","status"
:"1"},{"name":"Heng","price":"0","addr":" dflkas;df","des":"asdfasfasdfasdfasdfasdfasfasdfasdfasdfas"
,"viewed":"0","img":"","status":"1"},{"name":"asdDasdA","price":"0","addr":"asdADasd","des":"ASDasdASD"
,"viewed":"0","img":"","status":"1"},{"name":"asdfas","price":"0","addr":"fasdfas","des":"dfasdf","viewed"
:"0","img":"","status":"1"},{"name":"asdf","price":"0","addr":"asdfasdfas","des":"asdfasdfasdf","viewed"
:"0","img":"","status":"1"}];
//place within the Ajax success
$.each(data, function(i, val) {
var currRow = $("#tr0").clone().appendTo($('#items')).attr('id','tr' + (i + 1));
currRow.find('td:eq(0)').html(i + 1);
currRow.find('.name').html(val.name);
currRow.find('.price').html(val.price);
currRow.find('.addr').html(val.addr);
currRow.find('.des').html(val.des);
currRow.find('.viewed').html(val.viewed);
currRow.find('.status').html(val.status);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody id="items">
<tr id="tr0">
<td>Id</td>
<td><a><div class="name">Name</div></a></td>
<td><a><div class="price">Price</div></a></td>
<td><a><div class="addr">Addr</div></a></td>
<td><div class="des">Des</div></td>
<td><a><div class="viewed">Viewed</div></a></td>
<td><a><div class="status">Status</div></a></td>
</tr>
</tbody>
</table>
You can try this, I test it locally and it works:
$.ajax({
url: '<?php echo base_url('ads/select_post'); ?>',
data: {},
dataType: "json",
cache: false,
success: function (data) {
$.each(data, function (i, val) {
var tr = "<tr>" +
"<td>"+ (i + 1) + "</td>" +
"<td>"+ val.name + "</td>" +
"<td>"+ val.price + "</td>" +
"<td>"+ val.addr + "</td>" +
"<td>"+ val.des + "</td>" +
"<td>"+ val.viewed + "</td>" +
"<td>"+ val.status + "</td>" +
"</tr>";
$(tr).appendTo("tbody");
});
}
});
And your html table:
<table>
<tbody id="items">
</tbody>
</table>
You need something like this:
DEMO HERE
HTML Structure
<table>
<thead>
<th>Sl No.</th>
<th>Address</th>
<th>Description</th>
<th>Image</th>
<th>Name</th>
<th>Price</th>
<th>Status</th>
<th>Viewed</th>
</thead>
<tbody id="items">
</tbody>
</table>
JS
$.each(data, function (i, val) {
$("tbody#items").append("<tr><td>"+(i+1)+"</td><td><a><div>"+val.addr+"</div></a></td>"
+"<td><a><div>"+val.des+"</div></a></td>"
+"<td><a><div>"+val.img+"</div></a></td>"
+"<td><a><div>"+val.name+"</div></a></td>"
+"<td><a><div>"+val.price+"</div></a></td>"
+"<td><a><div>"+val.status+"</div></a></td>"
+"<td><a><div>"+val.viewed+"</div></a></td></tr>");
});
You need to create table rows() in the ajax success.
And you should not use same ids in the td tags.
var html = "";
$.ajax({
url: '<?php echo base_url('ads/select_post'); ?>',
data: {},
dataType: "json",
cache: false,
success: function (data) {
$.each(data, function (i, val) {
console.log(val.name);
html +="<tr>";
html += "<td>" + val.name + "</td>" ;
html += "<td>" + val.price + "</td>" ;
html += "<td>" + val.addr + "</td>" ;
html += "<td>" + val.des + "</td>" ;
html += "<td>" + val.viewed + "</td>" ;
html += "<td>" + val.status + "</td>" ;
html +="</tr>";
});
$("$items").html(html);
}
});
Your html:
<table>
<tbody id="items">
</tbody>
</table>
You probably need some code like this, This is rough idea you can let me know if you don't get it
this.tableElement = jQuery('<table/>', {
}).appendTo(gridWrapElement);
var tableBody = jQuery('<tbody/>', {
'class': 'eg-table-body'
});
this.tableBodyRow = jQuery('<tr/>', {
});
var scope = this;
var columns = [{
name:"Name",
dataIndex:"name",
width: "33%"
},{
name:"Price",
dataIndex:"price",
width: "33%"
},{
name:"Address",
dataIndex:"addr",
width: "34%"
}];
$.each(this.columns, function(index, column) {
var tableBody = jQuery('<td/>', {
width: column.width,
columnDataIndex: column.dataIndex,
columnIndex: index
});
jQuery('<div/>', {
html: "<a>" + column.name + "</a>",
class: "eg-table-Body-div"
}).appendTo(tableBody);
tableBody.appendTo(scope.tableBodyRow);
scope.tableBodyItems.push(tableBody);
});
jQuery(this.tableBodyRow).appendTo(tableBody);
jQuery(tableBody).appendTo(this.tableElement);
var body = '';
$.each(val,function(i,j){
body = body + '<tr><td>'+i+1+'</td>';
body = body + '<td>'+j.name+'</td>';
body = body + '<td>'+j.price+'</td>';
body = body + '<td>'+j.addr+'</td>';
body = body + '<td>'+j.des+'</td>';
body = body + '<td>'+j.viewed+'</td>';
body = body + '<td>'+j.status+'</td></tr>';
});
$('#items').html(body);
This will give you the table with values
It is better if you can rows dynamically. Then append generated html into tbody table like example below :
HTML
<table>
<tbody id="items">
<tr>
<td>No.</td>
<td>name</td>
<td>price</td>
<td>addr</td>
<td>des</td>
<td>viewed</td>
<td>status</td>
</tr>
</tbody>
JS
var data = [{
"name": "dfasdfas",
"price": "0",
"addr": "dfasdfas",
"des": "sadfdfasdfasdf",
"viewed": "0",
"img": "",
"status": "1"
}, {
"name": "asdDasdA",
"price": "0",
"addr": "asdADasd",
"des": "ASDasdASD",
"viewed": "0",
"img": "",
"status": "1"
}];
/************ put this inside ajax success block*/
var output;
$.each(data, function (i, val) {
output += '<tr><td>' + i + '</td>' +
'<td><a><div id="name">' + val.name + '</div> </a></td>' +
'<td><a><div id="price">' + val.price + '</div> </a></td>' +
'<td><a><div id"addr">'+ val.addr +'</div></a></td>' +
'<td><div id="des">' + val.des + '</div> </td>' +
'<td><a><div id="viewed">' + val.viewed + '</div></a></td>' +
'<td><a><div id="status">'+
val.status+'</div></a></td></tr>';
});
$('#items').append(output);
/************ end */
DEMO
Try this. Its shows all data in table.
http://jsfiddle.net/Navneethk/zcpp51tc/2/
var html = '<tr>';
for(var i = 0 ;i < data.length;i++){
var val = data[i];
html += '<td>'+i+'</td>'+
'<td><a><div id="name'+id+'">'+ val.name +'</div> </a></td>'+
'<td><a><div id="price'+id+'">'+ val.price +'</div> </a></td>'+
'<td><a><div id"addr'+id+'">+ val.addr +</div></a></td>'+
'<td><div id="des'+id+'">' +val.des+ '</div> </td>'+
'<td><a><div id="viewed'+id+'">'+ val.viewed +'</div></a></td>'+
'<td><a><div id="status'+id+'">' val.status '</div></a></td>';
}
$("#items").html(html);
You were assigning all 5 data row to the same template so that you only see the last data set returned.
You should create those 5 row dynamically by using createElement or jQuery.
I am new in Bootstrap JS. I have a table made with Bootsrap JS, whose data came from a Json file. Here is The Code-
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="fixedscroll">
<table id="user_table" class="table table-hover table-bordered table-striped responsive" style="margin-bottom: 0;" class="display">
<thead>
<tr>
<th>UID</th>
<th>Name</th>
<th>Address</th>
<th>Tags</th>
<th>Edit tags</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
function showAll(){
$.ajax({
url: "showAll",
dataType:"json",
success:function(data){
$('#user_table tr:gt(0)').remove();
jQuery.each(data['Payload'], function(index, value) {
var row = '<tr>'
+ '<td id="tduid">'+ value['uid']+ '</td>'
+ '<td>'+ value['name']+ '</td>'
+ '<td>'+ value['address']+ '</td>'
+ '<td>'+ value['tag1']+ ',' + value['tag2']+ ',' + value['tag3']+'</td>' + '<td>'+ '<button class="deleteUser btn btn-danger" type="submit">Edit</button>' + '</td></tr>';
$('#user_table').append(row);
});
}
});
Now This Payload is the name of my json, which came from a servlet where I call the database.
Now let, there is 3 tags. But some of rows have 2 tags. So, when I put the values in json the Json looks like-
{"Payload":[{"uid":"u01","name":"Subho","address":"Dumdum","tag1":"aircel","tag2":"vodafone","tag3":"airtel"},{"uid":"u02","name":"Jeet","address":"Baruipur","tag1":"airtel","tag2":"","tag3":"aircel"},{"uid":"u03","name":"Diba","address":"Jadavpur","tag1":"vodafone","tag2":"aircel","tag3":"airtel"},{"uid":"u04","name":"Tommy","address":"Baguihati","tag1":"aircel","tag2":"vodafone","tag3":""},{"uid":"u05","name":"Jonty","address":"Rahara","tag1":"","tag2":"vodafone","tag3":"airtel"},{"uid":"u06","name":"Gourav","address":"Tripura","tag1":"aircel","tag2":"vodafone","tag3":"airtel"}]}
Now You can see, that for UID=U02 there is 2 tags. And the output looks like picture attached. How can I remove the blank values or null values???? Please anyone help me...
I think, you are saying about the extra , in the tags column... one messy solution is
$.ajax({
url: "showAll",
dataType: "json",
success: function (data) {
$('#user_table tr:gt(0)').remove();
jQuery.each(data['Payload'], function (index, value) {
var tags = $.map([value.tag1, value.tag2, value.tag3], function (value) {
return value || undefined;
});
var row = '<tr>' + '<td id="tduid">' + value['uid'] + '</td>' + '<td>' + value['name'] + '</td>' + '<td>' + value['address'] + '</td>' + '<td>' + tags + '</td>' + '<td>' + '<button class="deleteUser btn btn-danger" type="submit">Edit</button>' + '</td></tr>';
$('#user_table').append(row);
});
}
});
As #Alnitak said
var tags = [value.tag1, value.tag2, value.tag3].filter(function (value) {
return value !== undefined;
});
console.log(tags)