I am a beginner in javascript. I have researched the forum for answers to my question. there were a couple that I think I could have used except with my code I am, not sure where or how to put it. Can someone help me? I need to show the eight rows right aligned. Thank you !!!
results.each(function(index) {
var result = "";
var theseClmStats = record.tables.PlanClmStats[index].tables.ClmStats;
var thisPlanClmStats = record.tables.PlanClmStats[index];
//query("#test").append(thisPlanClmStats.fields["PlanName"]+ " (" + index + ') has ' + thisPlanClmStats.tables.length +' table(s)<br/>');
if(thisPlanClmStats.fields.PlanId != null) {
theseClaimSource = thisPlanClmStats.tables.ClmStats.ClaimSource;
result += '<tr data-repeat="" data-breakable="ClaimSource' + index +'">';
result += '</tr>';
var ClmStatslen = theseClmStats.length;
for (var i=0; i < ClmStatslen; i++) {
var thisClmStats = theseClmStats[i];
result += '<tr data-repeat="" data-breakable="ClmStats' + i +'">';
result += '<td><br/></td>';
result += '<td class="data PlanID" textAlign:right>'+ thisClmStats.fields["ClaimSource"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["UniqueParticipants4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["ClaimVolume4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["ClaimAverage4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["PercentageofTOTALVolume4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["Paid4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["Pending4"] + '</td>';
result += '<td class="data PlanID">'+ thisClmStats.fields["Denied4"] + '</td>';
result += '</tr>';
}
}
this.after(result);
});
You seem to be mixing a bunch of concepts together. To make the text right-align in a table cell (<td>), you could just apply CSS to one of the classes you are using, such as:
<style type="text/css">
td.PlanID {text-align:right}
</style>
Then, when you append the HTML, the CSS will automatically be applied.
If you can't adjust the CSS file (or HTML file), then try adding to your JS:
document.getElementsByClassName("PlanID").style.textAlign= "right";
You would then add this line at the end of your Javascript. But it probably is better (and cleaner) to use the CSS method.
Related
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
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>
Fetched data from database with php and ajax, Everything is ok except note variable is empty.Can somebody find out the issue why note value is not going to display. How can i fix it.
success: function(response) {
var cats = {};
response.results.forEach(function(element) {
cats[element.team] = cats[element.team] || [];
cats[element.team].push(element);
});
var i = 0;
Object.keys(cats).forEach(function(team) {
let html = '';
// Append the category header
html = '<tr>';
html += '<td>' + team + '</td>';
html += '</tr>';
$('table').append(html);
// Loop through the results for this category
cats[team].forEach(function(element) {
var id = element.id;
var teamId = element.team_id;
var names = element.player;
var result = element.result;
var note = element.note;
html = '<tr>';
html += '<input type="hidden" name="Id[]" value="' + id + '"/>';
html += '<input type="hidden" name="data[' + i + '][team_id]" value="' + teamId + '"/>';
html += '<td>' + names + '</td>';
html += '<td><input type="text" name="result[]" value="' + result + '"></td>';
html += '</tr>';
$('table').append(html);
});
// Append the textarea at the end of the results
html = '<tr>';
html += '<td><textarea placeholder="note..." name="data[' + i + '][Note]">' + note + '</textarea></td>';
html += '</tr>';
$('table').append(html);
i++;
});
}
This is the output
database table
JSON output
{"groupData":{"id":"23","group_name":"Group B"},"results":
[{"id":"2","team_id":"4","team":"Team
B","player":"Deno","result":"14","note":"Lost"},
{"id":"3","team_id":"4","team":"Team
B","player":"Niob","result":"26","note":"Lost"},
{"id":"4","team_id":"4","team":"Team
B","player":"Skion","result":"76","note":"lost"},
{"id":"5","team_id":"5","team":"Team
C","player":"Bela","result":"47","note":"won"},
{"id":"6","team_id":"5","team":"Team
C","player":"yomi","result":"57","note":"won"}]}
You should set note value infront of cats[team].forEach(function(element) {}). Hope to help, my friend :))
success: function(response) {
var cats = {};
response.results.forEach(function(element) {
cats[element.team] = cats[element.team] || [];
cats[element.team].push(element);
});
var i = 0;
Object.keys(cats).forEach(function(team) {
let html = '';
// Append the category header
html = '<tr>';
html += '<td>' + team + '</td>';
html += '</tr>';
$('table').append(html);
var note;
// Loop through the results for this category
cats[team].forEach(function(element) {
var id = element.id;
var teamId = element.team_id;
var names = element.player;
var result = element.result;
note = element.note;
html = '<tr>';
html += '<input type="hidden" name="Id[]" value="' + id + '"/>';
html += '<input type="hidden" name="data[' + i + '][team_id]" value="' + teamId + '"/>';
html += '<td>' + names + '</td>';
html += '<td><input type="text" name="result[]" value="' + result + '"></td>';
html += '</tr>';
$('table').append(html);
});
// Append the textarea at the end of the results
html = '<tr>';
html += '<td><textarea placeholder="note..." name="data[' + i + '][Note]">' + note + '</textarea></td>';
html += '</tr>';
$('table').append(html);
i++;
});
}
I am trying to populate a table in HTML with data from a JSON array using JavaScript. My code is given below:
<head>
<title>Employee page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<div id="tableData"></div>
<script type="text/javascript">
var json_arr = {{ data_arr|safe }};
var tableData = '<table>';
tableData += '<th>' + "Serial no." + '</th>';
tableData += '<th>' + "Name" + '</th>';
tableData += '<th>' + "Age" + '</th>';
for (var i=0;i<json_arr.length;i++){
alert("Hello world!!");
var obj = json_arr[i];
alert(obj.id);
tableData += '<tr>';
tableData += '<td>' + odj.id + '</td>';
tableData += '<td>' + odj.name + '</td>';
tableData += '<td>' + obj.age + '</td>';
tableData += '</tr>';
}
tableData += '</table>';
document.getElementById("demo").innerHTML = tableData;
$('#tableData').html(tableData);
</script>
</body>
The JSON data is coming to the JS properly. The problem in the loop is in the line "tableData += '' + odj.id + '';" (maybe thereafter as well). I don't know how to fix it. No table is appearing in the HTML. Can someone please suggest how to fix this or at least an alternate way to do this? Thanks in advance!!!
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.