Displaying table with class in Jquery - javascript

I want to append some values from jQuery in my HTML table
$(document).ready(function() {
console.log("ready!");
// on form submission ...
$('form').on('submit', function() {
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
console.log(valueOne)
$.ajax({
type: "POST",
url: "/",
datatype:'json',
data : { 'first': valueOne},
success: function(result) {
console.log(result.result[0].userid);
$('#result').html("<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>");
},
error: function(error) {
console.log(error)
}
});
});
});
I am getting error as :
SyntaxError: missing ) after argument list for the line :
$('#result').html("<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>");
Can someone point out what is going wrong?
TIA

its all about quotes
$('#result').html('<table class="table table-bordered responsive"><tr><td>' + result.result[0].hosts[0].filer + '</td><td>' + result.result[0].hosts[0].hostname + '</td><td>' + result.result[0].hosts[0].model + '</td></tr></table>');
take a look at How to concatenate variable in string in javascript

Please try below code
var table = $('<table/>').addClass('table table-bordered responsive');
var rows='<tr><td>' + result.result[0].hosts[0].filer + '</td><td>' + result.result[0].hosts[0].hostname + '</td><td>' + result.result[0].hosts[0].model + '</td></tr>';
$(table).append(rows);
$('#result').append(table);

Related

JavaScript $.each json is not defined

I have a string of JSON
msg = {d: "[{"ID":1,"IndentDate":"30/07/2018","EmpCode":"4000…er":"sef"}]
I wish to append my table but its showing row is undefined
$.each(msg, function(i, row) {
$("#autoTable").append("<tr><td>" + row['IndentDate'] + "</td><td>" + row['EmpCode'] + "</td></tr>");
})
I tried
$.each(json, function (i, msg) {
$("#autoTable").append("<tr><td>" + msg.IndentDate + "</td><td>" + msg.EmpCode + "</td></tr>");
})
too.please help
this thing worked..hope it helps others too..thanks for the help guys
var jsonString = JSON.parse(msg.d);
jsonString.forEach(function (row) {
$("#autoTable").append("" + row.IndentDate + "" + row.EmpCode + " ");
});

How do I display external API search results in a table?

I am a final year student and am creating a food log web application for my major project. I have created a search function that allows me to search and display external API results, but now I wish to display them in a table, can anyone help please?
I would prefer if it would be a table that can be filtered, eg, the columns ordered ascending/descending?
Thanks
function get foodItem(userInput) {
var storedSearchItem;
$('.resultContainer').html('');
$.ajax({
type: 'GET',
async: false,
url: 'https://api.nutritionix.com/v1_1/search/'+userInput+'?'+
'fields=item_name%2Citem_id%2Cbrand_name%2Cnf_calories%2Cnf_total_fat&appId=325062a4&appKey=bf1a30b2066602dc6f33db888cd53bd3',
success: function(d) {
storedSearchItem = d.hits;
}
});
storedSearchItem.map(function(item) {
var x = item.fields
$('.resultContainer').append(
'<div class="itemBar">'+
'<h2>' + x.item_name + '<h2>' +
'<h3>Calories: ' + x.nf_calories + '<h3>' +
'<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
'<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
'</div>'
);
});
}//ends get result function
function searchValue() {
var formVal = document.getElementById('itemSearch').value; //value from search bar
getFoodItem(formVal);
}
$('#searchForm').submit(function(e) {
e.preventDefault();
});`
You need to append your table in the success function
your code will look like something like this
success: function(d) {
storedSearchItem = d.hits;
storedSearchItem.map(function(item) {
var x = item.fields
$('.resultContainer').append(
'<div class="itemBar">'+
'<h2>' + x.item_name + '<h2>' +
'<h3>Calories: ' + x.nf_calories + '<h3>' +
'<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
'<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
'</div>'
);
});
}

How to append row data to table one by one?

Here is my html code
<tr id="tHead">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Here is my js code
$(document).ready(function(){
$.ajax({
url: "data.json",
dataType: "json",
success: function(obj) {
for(i=0;i<obj.data.length;i++){
$("#tHead").after("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
});
});
Now I can append data after "tHead" tr.
Because I use .after in my js code, so the data row will append one by one after"tHead" which will make my first data row become the last one in table.
I need first data row will be first row on table when I append it.
What can I do to make it correct?
I try to use .append but not work, the new row will directly append in the end of "tHead" row.
You simply need to use .append() on the parent table, instead of using .after() on the #tHead
success: function(obj) {
for(var i = 0; i < obj.data.length; i++) {
$("#tHead").parent("table").append("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
your rows will now be appended in chronological order.
A second solution would be to use .after() on the :last psuedo selector together with the .siblings() selector used with #tHead.
success: function(obj) {
for(var i = 0; i < obj.data.length; i++) {
$("#tHead").siblings("tr:last").after("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
Invert your loop , and it will work as you want
$(document).ready(function()
{
$.ajax(
{
url: "data.json",
dataType: "json",
success: function(obj)
{
for(i=obj.data.length-1;i>=0;i--)
{
$("#tHead").after("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
});
});
Something like this maybe:
$(document).ready(function(){
$.ajax({
url: "data.json",
dataType: "json",
success: function(obj) {
$("#tHead").append("<tr>");//----------- open new row.
obj.forEach(function(row) {
$("#tHead").append("<td>");
$("#tHead").append(row);//---------- actual info.
$("#tHead").append("</td>");
});
$("#tHead").append("</tr>");//---------- close new row.
}
}
});
});
An excellent read can be found here : https://stackoverflow.com/a/9329476/2645091
on the different ways to iterate arrays.

Clearing list from partial view with javascript

I have a list that is created by a javascript function. I have a separate function to reset the page, but it will not clear the list that was created. Any thoughts?
Javascript call to create the list:
$(function submit() {
$('form').submit(function (e) {
e.preventDefault();
$("#searchResults").show();
$.ajax({
url: 'Home/TAPost',
data: $('form').serialize(),
dataType: "json",
type: 'POST',
success: function (accts) {
$("#rowHeaders").append('<tr><td>' + "Customer Name" + '</td><td>' + " Customer SSN" + '</td><td>' + " FHBOAT Account Number" + '</td><td>' +
" Original Account Number" + '</td><td>' + " Product Type" + '</td><tr>');
$.each(accts, function (index, acct) {
$("#resultsTable").append('<tr><td>' + acct.CustomerName + '</td><td>' + " " + acct.SSN + '</td><td>' + " " + acct.FHAcctNumber + '</td><td>'
+ " " + acct.OriginalAcctNumber + '</td><td>' + " " + acct.ProductType + '</td></tr>');
});
}
});
return false;
});
});
Call to reset:
function resetForm() {
document.getElementById("LOB").style.borderColor = "";
document.getElementById("LOB").style.borderColor = "";
$('#resultsTable').empty();
return false;
};
HTML:
<section id="searchResults">
<h2>Search Results</h2>
<table id="resultsTable" cellpadding="2" cellspacing="50">
<thead id="rowHeaders"></thead>
</table>
</section>
Instead of:
$('#resultsTable').empty();
You can use:
$('#resultsTable').html('');

if statement in ajax append block

I have an ajax block that is processing a json response from an external API. I have a field for the object called status and depending on the status, I would like to display the corresponding tooltip. Currently, I am trying to do this with an if statement but but I am getting an error.
The error is:
Uncaught SyntaxError: Unexpected token if
Ajax block
<script type="text/javascript">
$.ajax({
url: "pull_overview",
dataType: "json",
cache: false,
success: function(data){
if ( data == null ) {
$('#ajax-loader').hide()
$('#overviewlist tbody').append("<tr><td colspan='100'><h3><center>You have no recent transactions.</center></h3></td></tr>");
}
else {
$('#ajax-loader').hide()
$.each(data, function(index, element) {
$('#overviewlist tbody').append("<tr><td>" + element.name + "</td><td>"
+ element.time + "</td><td>"
+ element.type + "</td><td>"
+ element.change_in_balance + "</td><td>"
+ element.method + "</td><td>"
+
if (element.status == 'New Transaction') {
"<td><button type='button' class='tooltips btn-u btn-u-xs btn-u-purple' data-toggle='tooltip' data-placement='right' title='Your transaction is currently being processed'>Pending</button></td></tr>"
}
});
}
}
});
</script>
Like the error says, you have a SyntaxError. The fixed code is:
$.ajax({
url: "pull_overview",
dataType: "json",
cache: false,
success: function (data) {
if (data == null) {
$('#ajax-loader').hide()
$('#overviewlist tbody').append("<tr><td colspan='100'><h3><center>You have no recent transactions.</center></h3></td></tr>");
} else {
$('#ajax-loader').hide()
$.each(data, function (index, element) {
$('#overviewlist tbody').append("<tr><td>" + element.name + "</td><td>" + element.time + "</td><td>" + element.type + "</td><td>" + element.change_in_balance + "</td><td>" + element.method + "</td><td>" + element.status == 'New Transaction' ?
"<td><button type='button' class='tooltips btn-u btn-u-xs btn-u-purple' data-toggle='tooltip' data-placement='right' title='Your transaction is currently being processed'>Pending</button></td></tr>" : "");
});
}
}
});
What is changed?
some missing parentheses
you cannot have if statement inside of a string (e.g. "foo" + if(something) "bar"). Use ternary operator instead: "foo" + something ? "bar" : ""
Useful resources:
Operator precedence with Javascript Ternary operator
How to find Javascript syntax errors
How do you use the ? : (conditional) operator in JavaScript?
You cannot put an if statement in the middle of a string concatination in your last append call. do this instead
content = "<tr><td>" + element.name + "</td><td>"
+ element.time + "</td><td>"
+ element.type + "</td><td>"
+ element.change_in_balance + "</td><td>"
+ element.method + "</td><td>";
if (element.status == 'New Transaction')
content += "<td><button type='button' class='tooltips btn-u btn-u-xs btn-u-purple' data-toggle='tooltip' data-placement='right' title='Your transaction is currently being processed'>Pending</button></td></tr>";
$('#overviewlist tbody').append(content);

Categories