I have a class project where I need to pull data from my SQLite DB and place it into <table>.
But every time I reload the page I get this Table image and I was hoping for some help. I'm new to JavaScript and I need to finish this task in a few hours, I've tried to pull the data into an object and from the object into this line str += "<td>" + results.rows.item(i).Firstname + "</td>" and still it didn't work.
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM Customers_Table ', [], function (tx, results) {
var len = results.rows.length, i;
document.getElementById("tablea").innerHTML = '';
var str = '';
str += "<th>FirstName</th>";
str += "<th>LastName</th>";
str += "<th>Address</th>";
str += "<th>City</th>";
str += "<th>Email</th>";
for (i = 0; i < len; i++) {
str += "<tr>";
str += "<td>" + results.rows.item(i).Firstname + "</td>";
str += "<td>" + results.rows.item(i).Lastname + "</td>";
str += "<td>" + results.rows.item(i).Address + "</td>";
str += "<td>" + results.rows.item(i).City + "</td>";
str += "<td>" + results.rows.item(i).Email + "</td>";
str += "</tr>";
document.getElementById("tablea").innerHTML += str;
str = '';
}
});
});
Well, considering that you have data in results. It should be used as:
results.rows.item[i].Firstname
NOT
results.rows.item(i).Firstname
Finally figured out the problem, the .Firstname and the rest didn't match the column names from the Db table, it was lowercase,look carefully at your code guys!!
Related
I have the following javascript code. I try to get some information from an API and display them in a datatable. The problem is when i load the page, even if i have 10 elements per page selected I can see all 102 elements. Also when i change from 10 elements to 25 all my information is removed and I get the messege "No records to display".
buildlist()
function buildlist() {
var url = 'http://127.0.0.1:8000/api/angajat-list/'
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
let temp = "";
data.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.idAngajat + "</td>";
temp += "<td>" + itemData.nume + "</td>";
temp += "<td>" + itemData.prenume + "</td>";
temp += "<td>" + itemData.functie + "</td>";
temp += "<td>" + itemData.domiciliuFeroviar + "</td>";
temp += "<td>" + itemData.oreLucrate + "</td>";
temp += "<td>" + itemData.disponibilitate + "</td>";
temp += "<td>" + itemData.programare + "</td>";
temp += "</tr>";
});
console.log(temp)
document.querySelector('tbody').innerHTML = temp;
}
)
}
)
}
$(document).ready(function () {
$('#datatable').dataTable();
});
This is the Javascript code.
<div class="card-body">
<table id="datatable">
<thead>
<tr>
<th>ID ANGAJAT</th>
<th>NUME</th>
<th>PRENUME</th>
<th>FUNCTIE</th>
<th>DOMICILIU FEROVIAR</th>
<th>ORE LUCRATE</th>
<th>DISPONIBILITATE</th>
<th>PROGRAMARE</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
This is the code from the Html file
Try this
function buildlist() {
var url = 'http://127.0.0.1:8000/api/angajat-list/'
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
let temp = "";
data.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.idAngajat + "</td>";
temp += "<td>" + itemData.nume + "</td>";
temp += "<td>" + itemData.prenume + "</td>";
temp += "<td>" + itemData.functie + "</td>";
temp += "<td>" + itemData.domiciliuFeroviar + "</td>";
temp += "<td>" + itemData.oreLucrate + "</td>";
temp += "<td>" + itemData.disponibilitate + "</td>";
temp += "<td>" + itemData.programare + "</td>";
temp += "</tr>";
});
console.log(temp)
document.querySelector('tbody').innerHTML = temp;
$('#datatable').dataTable();
}
)
}
)
}
$(document).ready(function () {
buildlist();
});
Also, try using datatable's ajax functionality - https://datatables.net/examples/ajax/objects.html
My code is this
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html += "<tr>";
html += "<td>" + data[i].personName + "</td>";
html += "<td>" + data[i].fatherName + "</td>";
html += "<td>" + data[i].personPhone + "</td>";
html += "<td>" + data[i].personCnic + "</td>";
html += "<td>" + data[i].deliveryDate + "</td>";
html += "<td>" + data[i].submissionDate + "</td>";
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].session + "</td>";
html += "<td>" + data[i].board + "</td>";
html += "<td>" + data[i].amount + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("box").innerHTML = html;
How can I use an event listeners using this approach?
I have seen many methods but none of that match my scenario.
You need to add an onClick which is different for every row, in there you pass as parameter the row index :) than you can handle it on the function.
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html+="<tr onclick='myFunction("+i+")'>";
html+="<td>"+data[i].personName+"</td>";
html+="<td>"+data[i].fatherName+"</td>";
html+="<td>"+data[i].personPhone+"</td>";
html+="<td>"+data[i].personCnic+"</td>";
html+="<td>"+data[i].deliveryDate+"</td>";
html+="<td>"+data[i].submissionDate+"</td>";
html+="<td>"+data[i].year+"</td>";
html+="<td>"+data[i].session+"</td>";
html+="<td>"+data[i].board+"</td>";
html+="<td>"+data[i].amount+"</td>";
html+="</tr>";
}
html+="</table>";
function myFunction(x) {
console.log('index' + x + 'was clicked')
// do the handling here
}
HERE YOU HAVE YOUR DEMO
let data = [{ personName: "test1"}, {personName: "test2"}]
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html+="<tr onclick='myFunction("+i+")'>";
html+="<td>"+data[i].personName+"</td>";
html+="</tr>";
}
html+="</table>";
document.getElementById("demo").innerHTML = html;
function myFunction(i) {
console.log('index ' + i + ' was clicked')
// do the handling here
console.log(data[i])
}
<p id="demo"></p>
You can add the event listeners after you adding their html into the DOM.
Like this:
document.getElementById("box").querySelectorAll('tr').forEach(tr => {
tr.addEventListener('click', function() {
console.log(tr.textContent);
});
});
And working demo: (I added some dumb data so the demo will work)
const data = new Array(5).fill(0).map((_, idx) => ({
personName: `personName-${idx}`,
fatherName: `fatherName-${idx}`,
personPhone: `personPhone-${idx}`,
personCnic: `personCnic-${idx}`,
deliveryDate: `deliveryDate-${idx}`,
submissionDate: `submissionDate-${idx}`,
year: `year-${idx}`,
session: `session-${idx}`,
board: `board-${idx}`,
amount: `amount-${idx}`
}));
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html += "<tr>";
html += "<td>" + data[i].personName + "</td>";
html += "<td>" + data[i].fatherName + "</td>";
html += "<td>" + data[i].personPhone + "</td>";
html += "<td>" + data[i].personCnic + "</td>";
html += "<td>" + data[i].deliveryDate + "</td>";
html += "<td>" + data[i].submissionDate + "</td>";
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].session + "</td>";
html += "<td>" + data[i].board + "</td>";
html += "<td>" + data[i].amount + "</td>";
html += "</tr>";
}
html += "</table>";
const box = document.getElementById("box");
box.innerHTML = html;
box.querySelectorAll('tr').forEach(tr => {
const _tr = tr;
tr.addEventListener('click', () => {
console.log(_tr.textContent);
});
});
<div id="box"></div>
This question already has answers here:
How to return an image from http source in Javascript
(5 answers)
Closed 3 years ago.
Hi I want to display multiple image into html table using jquery check my code for more clearification.
In Console i get only image source as
<img src="uploads/">
$.ajax({
url : 'check.php',
success: function (data) {
data = $.parseJSON(data);
var html = "";
for(var a = 0; a < data.length; a++) {
var firstName = data[a].first_name;
var email = data[a].email;
var dob = data[a].dob;
var country = data[a].country;
var gender = data[a].gender;
var meal= data[a].meal;
var img = data[a].profile_pic;
var array = img.split(',');
for (var i = 0; i < array.length; i++) {
var src = "uploads/"+ array[i];
var img1 = '<img src='+ src +'>';
}
html += "<tr>";
html += "<td>" + firstName + "</td>";
html += "<td>" + email + "</td>";
html += "<td>" + dob + "</td>";
html += "<td>" + country + "</td>";
html += "<td>" + gender + "</td>";
html += "<td>" + meal + "</td>";
html += "<td>" + img1 + "</td>";
html += "</tr>";
document.getElementById("data").innerHTML += html;
}
},
Just move your img content inside for loop.
$.ajax({
url : 'check.php',
success: function (data) {
data = $.parseJSON(data);
var html = "";
for(var a = 0; a < data.length; a++) {
var firstName = data[a].first_name;
var email = data[a].email;
var dob = data[a].dob;
var country = data[a].country;
var gender = data[a].gender;
var meal= data[a].meal;
var img = data[a].profile_pic;
var array = img.split(',');
html += "<tr>";
html += "<td>" + firstName + "</td>";
html += "<td>" + email + "</td>";
html += "<td>" + dob + "</td>";
html += "<td>" + country + "</td>";
html += "<td>" + gender + "</td>";
html += "<td>" + meal + "</td>";
html += "<td>";
for (var i = 0; i < array.length; i++) {
var src = "uploads/"+ array[i];
var img1 = '<img src='+ src +'>';
html += img1
}
html += "</td>";
html += "</tr>";
document.getElementById("data").innerHTML += html;
}
},
This is the function in my javascript. Triggered by an onclick function by an another function.
function getValueUsingParentTag(){
var tv_type = [];
var screen_size = [];
var connectivity = [];
var features = [];
var chkArray = [tv_type,screen_size,connectivity,features];
$("#tvtype input:checked").each(function() {
tv_type.push($(this).val());
});
$("#screensize input:checked").each(function() {
screen_size.push($(this).val());
});
$("#connection input:checked").each(function() {
connectivity.push($(this).val());
});
$("#feature input:checked").each(function() {
features.push($(this).val());
});
console.log(chkArray);
//alert(JSON.stringify(chkArray));
alert('hello');
$.get("output-tv.php",{tv_type:tv_type,screen_size:screen_size,connectivity:connectivity,features:features},function(chkArray){
});
}
This is the sample json object returned
{"result":[
{"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
{"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
]}
I need to create a table in javascript based on the json object returned. I dont know how. Please Help.
following function builds the table in a string.
function getTable(data) {
var html = "";
html += "<table><tr><td>product_code</td><td>tv_name</td><td>size</td><td>tv_type</td></tr>";
html += "<tr>";
for(var i = 0, ceiling = data.result.length; i < ceiling; i++) {
var row = data.result[i];
html += "<td>" + row.product_code + "</td>";
html += "<td>" + row.tv_name + "</td>";
html += "<td>" + row.size + "</td>";
html += "<td>" + row.tv_type + "</td>";
}
html += "</tr>";
html += "</table>";
return html;
}
suppose you have a div with id mydiv, you can add the table to this div with following code:
document.getElementById("mydiv").innerHTML = getTable(data);
Here's a simple Javascript only loop example:
http://jsfiddle.net/mCLVL/
var tableData = {"result":[
{"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
{"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
]};
var tableHTML = "<table>";
for (var i = 0; i < tableData["result"].length; i++) {
tableHTML += "<tr>";
tableHTML += "<td>" + tableData["result"][i]["product_code"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["tv_name"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["size"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["tv_type"] + "</td>";
tableHTML += "</tr>";
}
tableHTML += "</table>";
console.log(tableHTML);
It will be so simple by using JSRender. I made a fiddle using jsrender template check it.
Using JSRender Fiddle
I am reading data from an XML file then displaying it in a table in Javascript. However, only the first row displays well and the rest of the rows dont as follows:
results = "<table class= \"table table-condensed table-hover table-bordered table-striped\">";
results += "<caption>Payment History</caption>";
results += "<thead>";
results += "<tr>";
results += "<th>User</th>";
results += "<th>Video Name</th>";
results += "<th>Payment Date</th>";
results += "<th>Time</th>";
results += "</tr>";
results += "</thead>";
results += "<tbody>";
for (var index = 0; index < items.length; index++)
{
var deviceNumElement = items[index].getElementsByTagName("devicenumber")[0];
var VideoNumElement = items[index].getElementsByTagName("videonumber")[0];
var dateElement = items[index].getElementsByTagName("paymentdate")[0];
var timeElement = items[index].getElementsByTagName("paymenttime")[0];
if (deviceNumElement && VideoNumElement && dateElement && timeElement)
{
deviceNum[index] = deviceNumElement.firstChild.data;
videoNum[index] = VideoNumElement.firstChild.data;
paidDate[index] = dateElement.firstChild.data;
paidTime[index] = timeElement.firstChild.data;
results += "<tr>";
results += "<td>"+ deviceNum[index] + "</td>";
results += "<td>" + videoNum[index] + "</td>";
results += "<td>" + paidDate[index] + "</td>";
results += "<td>" + paidTime[index] + "</td>";
results += "</tr>";
}
results += " </tbody>";
results += " </table>";
alert(results);
var div = document.getElementById("paymentDetails");
div.innerHTML = results;
}
The data gets displayed as follows:
Payment History
User VideoName Payment Date Time
43CA3KZXYQGBK Animal Series 14-01-2014 14:12:20
43CA3KZXYQGBKAnimalSeries10-01-201415:40:12
43CA3KZXYQGBKAnimalSeries10-01-201403:21:15
43CA3KZXYQGBKAnimalSeries10-01-201416:39:28
The XML Data:
<xml>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-11</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-10</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-01</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
<payments>
<devicenumber>43CA3KZXYQGBK</devicenumber>
<videonumber>1234567</videonumber>
<paymentdate>2014-01-09</paymentdate>
<paymenttime>19:38:19</paymenttime>
</payments>
</xml>
What could i be doing wrong?
The closing tag for table is in the for-loop. You need to put it outside the for-loop:-
for (var index = 0; index < items.length; index++)
{
var deviceNumElement = items[index].getElementsByTagName("devicenumber")[0];
var VideoNumElement = items[index].getElementsByTagName("videonumber")[0];
var dateElement = items[index].getElementsByTagName("paymentdate")[0];
var timeElement = items[index].getElementsByTagName("paymenttime")[0];
if (deviceNumElement && VideoNumElement && dateElement && timeElement)
{
deviceNum[index] = deviceNumElement.firstChild.data;
videoNum[index] = VideoNumElement.firstChild.data;
paidDate[index] = dateElement.firstChild.data;
paidTime[index] = timeElement.firstChild.data;
results += "<tr>";
results += "<td>"+ deviceNum[index] + "</td>";
results += "<td>" + videoNum[index] + "</td>";
results += "<td>" + paidDate[index] + "</td>";
results += "<td>" + paidTime[index] + "</td>";
results += "</tr>";
}
}
results += " </tbody>";
results += " </table>";
alert(results);
var div = document.getElementById("paymentDetails");
div.innerHTML = results;