We Keep Coding

Appending to tbody not showing data in table

I am trying to append some data to a Datatables tbody. I do recieve the data when I console.log() the data, but the data does not show when I try to append it to my Datatable (The id of my table is 'example' btw). I do not know where to go in terms of debugging this as well.
asyncRequest.then((tracks) => {
var tableData = '';
// rows
for (track in tracks) {
tableData += '<tr>';
tableData += '<td>' + tracks[track]._id + '</td>';
tableData += '<td>' + tracks[track].Position + '</td>';
tableData += '<td>' + tracks[track].Track + '</td>';
tableData += '<td>' + tracks[track].Artist + '</td>';
tableData += '<td>' + tracks[track].Streams + '</td>';
tableData += '<td>' + tracks[track].Url + '</td>';
tableData += '<td>' + tracks[track].Date + '</td>';
tableData += '</tr>';
}
console.log(tableData);
$(document).ready(function () {
var table = $('#example').DataTable();
$(table).find('tbody').append(tableData);
});
});
</script>
tracks: [0 … 99]
0:
_id: "5e8d677a6e5216bc865e084a"
Position: 1
Track: "Dance Monkey"
Artist: "Tones And I"
Streams: 6155025
Url: "https://open.spotify.com/track/1rgnBhdG2JDFTbYkYRZAku"
Date: "1/1/20"

Can u try this one fisrt destroy then append then refresh it
and put your document ready out of request and initialize there
$(document).ready(function () {
var table = $('#example').DataTable();
});
then after u take data appen it destroy it and refresh it
asyncRequest.then((tracks) => {
var tableData = '';
// rows
for (track in tracks) {
tableData += '<tr>';
tableData += '<td>' + tracks[track]._id + '</td>';
tableData += '<td>' + tracks[track].Position + '</td>';
tableData += '<td>' + tracks[track].Track + '</td>';
tableData += '<td>' + tracks[track].Artist + '</td>';
tableData += '<td>' + tracks[track].Streams + '</td>';
tableData += '<td>' + tracks[track].Url + '</td>';
tableData += '<td>' + tracks[track].Date + '</td>';
tableData += '</tr>';
}
console.log(tableData);
$('#example').DataTable().destroy();
$('#example').find('tbody').append(str);
$('#example').DataTable().draw();
});

Call a function passing a file name from dynamically created table

I am trying to pass a file name from dynamically created table and getting some Uncaught ReferenceError: Q1_58_English_Resume is not defined
at HTMLAnchorElement.onclick (AddRequirement:1)
Here the file name is "Q1_58_English_Resume"
The script for dynamic table is below
if (filesData.length > 0) {
var table = '';
table += '<table class="radar-grid-table" id="TableAttach">';
table += '<thead>';
table += '<tr>';
table += '<th>Files</th>'
//table += '<th>Select</th>';
table += '<th>Actions</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(filesData, function (i, item) {
table += '<tr>';
table += '<td>' + item + '</td>';
//table += '<td title="' + item.AttachmentId + '">' + item.AttachmentId + '</td>';
//<input value="' + full.QuestionId + '
table += '<td> Download </td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
return table;
}
And the Function is below:
function DownloadAttachment(fileName) {
debugger;
var url = "/RequirementManagement/OpenFile?ids=" + fileName;
window.location.href = url;
}

Try this , should work
var table = '';
table += '<table class="radar-grid-table" id="TableAttach">';
table += '<thead>';
table += '<tr>';
table += '<th>Files</th>'
//table += '<th>Select</th>';
table += '<th>Actions</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(filesData, function (i, item) {
table += '<tr>';
table += '<td>' + item + '</td>';
//table += '<td title="' + item.AttachmentId + '">' + item.AttachmentId + '</td>';
//<input value="' + full.QuestionId + '
table += '<td> Download </td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
return table;
}

JSON to HTML Table JavaScript Not Working

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>

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

Convert a JS Array ìnto HTML Table | Weird <tbody> Tag?

When I use this code, all the information is displayed in only one column. Also, if I check with Google Chrome, there are many <tbody> tags that were added to table.innerHTML .
http://puu.sh/4oLmM.png
How can I make it so it displays the header and each content[i] horizontally?
<table id="table1" border=\"5\" cellpadding=\"10\">
<script>
var table = document.getElementById('table1');
table.innerHTML = '';
var header = ['Method','Gp/Exp','Exp/H']
var content = [
['Kill',1,100],
['Die',42,1222],
['Yo',1,1245]
]
//Header
table.innerHTML += '<tr>';
for(var i in header){
table.innerHTML += '<th>' + header[i] + '</th>';
}
table.innerHTML += '</tr>';
//Content
for(var i in content){
table.innerHTML += '<tr>';
for(var j in content[i]){
table.innerHTML += '<td>' + content[i][j] + '</td>';
}
table.innerHTML += '</tr>';
}
</script>

I suspect this is what Ian meant:
var html = '<tr>';
for(var i in header){
html += '<th>' + header[i] + '</th>';
}
html += '</tr>';
for(var i in content){
html += '<tr>';
for(var j in content[i]){
html += '<td>' + content[i][j] + '</td>';
}
html += '</tr>';
}
table.innerHTML = html;
The way you've done it, you're adding badly formed HTML to the element. The overall string is fine, but my guess is that every time you do table.innerHTML +=, it realises that you're creating a dodgy HTML string, and messes around with it to get something that is valid HTML.