Load table via list ajax - javascript

I'm trying to load a table via post ajax, but it's not loading properly.
table:
<table class="table table-responsive table-hover table-striped" id="tableestoque" style="font-size:12px;">
<thead>
<tr>
<th>Nome Empresa</th>
<th>Qtd</th>
</tr>
</thead>
<tbody></tbody>
</table>
And here is how I am loading:
$.each(data.listaEstoque, function (i, item) {
$("#tableestoque").append("<tr"
+ "<td>" + item.empresaProduto.nome + "</td>"
+ "<td>" + item.qtd + "</td>"
+ "</tr>")
});
It is loading like this, I want you to load each one into a column, and if you have more rows, each in a row.

I created sample fiddle for you. Right now you are iterating over each element, not over each object. You should iterate over object using forEach statement.
var data = [{
id: 1,
name: 'Name1'
}, {
id: 2,
name: 'Name2'
}];
var $table = $("#tableestoque");
var $tr, $td1, $td2;
data.forEach(function(item) {
$tr = $('<tr>');
$td1 = $('<td>' + item.id + '</td>');
$td2 = $('<td>' + item.name + '</td>');
$tr.append($td1).append($td2);
$table.append($tr);
});

It looks like you need to append your html to <tbody> like this:
$.each(data.listaEstoque, function (i, item) {
$("#tableestoque tbody").append("<tr"
+ "<td>" + item.empresaProduto.nome + "</td>"
+ "<td>" + item.qtd + "</td>"
+ "</tr>")
});

Related

How to add a row in every 3 rows in table javascript

I create table with print out data from database like this:
here the JS and HTML.
JS
function initDataTableSaldoRek1() {
showLoadingCss()
$.ajax({
url: baseUrl + "api_dashboard/get_ivest",
dataType: 'JSON',
type: "GET",
success: function (res) {
var data = res.return;
$("#date").html(data[0].TANGGAL);
$('#table-invest tbody').empty();
$.each(data, function (key, val) {
var html = "<tr>" +
"<td>" + val.DATE + "</td>" +
"<td>" + val.TYPE + "</td>" +
"<td align='right'>" + accounting.formatNumber(val.USD,2,".",",") + "</td>" +
"<td align='right' >" + accounting.formatNumber(val.EUR,2,".",",") + "</td>" +
"</tr>";
$('#table-invest tbody').append(html);
});
hideLoadingCss()
},
});
}
HTML
<div class="view-table" >
<table id="table-invest" class="table table-bordered">
<thead>
<tr>
<th style="background-color: #67a2d8" width="12.5%">DATE</th>
<th style="background: #67a2d8" width="12.5%">TYPE OF PAYMENT</th>
<th style="background: #67a2d8" width="12.5%">EUR</th>
<th style="background: #67a2d8" width="12.5%">USD</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
and i want add a row every 3 rows that sum column 2 & 3 as below .
Everybody in here have ever experience to create table as below before in JavaScript?
Thank you..
Just make a check on each third row, since the $.each callback provides an index value.
function initDataTableSaldoRek1() {
showLoadingCss()
$.ajax({
url: baseUrl + "api_dashboard/get_ivest",
dataType: 'JSON',
type: "GET",
success: function (res) {
var data = res.return;
$("#date").html(data[0].TANGGAL);
let html = "<tr>" +
"<td>" + val.DATE + "</td>" +
"<td>" + val.TYPE + "</td>" +
"<td align='right'>" + accounting.formatNumber(val.USD, 2, ".", ",") + "</td>" +
"<td align='right' >" + accounting.formatNumber(val.EUR, 2, ".", ",") + "</td>" +
"</tr>";
$('#table-invest tbody').append(html);
$('#table-invest tbody').empty();
$.each(data, function (key, val) {
if ((key+1) % 3 === 0 ){
html = `<tr><td>TOTAL</td></tr> ${html}`;
}else{
return html;
}
});
hideLoadingCss()
},
});
}
You can simply use a counter, when this counter reaches the amount of rows you want, add the "total" row and reset the counter.
Also, keep track of the total value (I don't know which total you want to calculate, so it is up to you this part), inside the if to check the counter, reset this total too.
Something like this:
let counter = 0;
let sumTotal = 0;
$.each(data, function(key, val) {
var html = "<tr>" +
"<td>" + val.DATE + "</td>" +
"<td>" + val.TYPE + "</td>" +
"<td align='right'>" + accounting.formatNumber(val.USD, 2, ".", ",") + "</td>" +
"<td align='right' >" + accounting.formatNumber(val.EUR, 2, ".", ",") + "</td>" +
"</tr>";
sumTotal = 0;//USE YOUR LOGIC TO CALCULATE AND INCREASE TOTAL
$('#table-invest tbody').append(html);
counter++;
//check if it is the moment to add the new row total
if (counter == 3){
let newRow = "<tr>" +
"<td>Total: " + sumTotal + "</td>" +
"</tr>";
$('#table-invest tbody').append(newRow);
counter = 0;
sumTotal = 0;
}
});

retrieve and show a specific value via jQuery

I need some help, I'm consuming a Web Api service from a MVC ASP.NET App using the jQuery' function $.ajax and need to retrieve a specific record from database, I can connect to the service and retrieve the correct value according to the id provided but I can manage to show the result in a table, I have checked the properties names and all is good, this is my javascript code
$("#boton_de_pabletoreto2").click(function () {
var id = $("#busqueda").val();
$.ajax({
type: "GET",
url: "http://localhost:55987/api/Empleado/"+ id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data != null)
{
$.each(data, function (i, item) {
var rows = "<tr>" +
"<td id='id'>" + item.id + "</td>" +
"<td id='nombres'>" + item.Nombres + "</td>" +
"<td id='cargo'>" + item.Cargo + "</td>" +
"<td id='dpto'>" + item.Dpto + "</td>" +
"</tr>";
$('#Table').append(rows);
});
console.log(data);
}
else
{
alert("no se encontrarón datos");
}
},
failure: function (data) {
alert(data.responseText);
},
error: function (data) {
alert(data.responseText);
}
});
});
and this is what it shows
I know that it retrieves a record because from the code got the due record in console
and this is the HTML code
<div class="panel panel-primary">
<div class="panel-heading">
$.ajax pabletoreto
</div>
<div class="panel-body">
ID: <input type="text" id="busqueda"><br /><br />
<table class="table table-bordered" id="Table">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Departamento</th>
<th>Cargo</th>
</tr>
</table>
</div>
<div class="row">
<div class="col-md-2 offset-md-2"><button id="boton_de_pabletoreto">Obtener Todos</button></div>
<div class="col-md-1"><button id="boton_de_pabletoreto2">Búsqueda</button></div>
</div>
<br />
I use exactly the same code (except doesn´t need to provide the id value and the due url: "http://localhost:55987/api/Empleados") to retrieve all the records and it works
I know that it retrieves a record because from the code got the due record in console
Because you get only one record as a json object (not an array) the .each() iterates on each property (this is your issue....your undefined elements):
var data = {id: 1, Nombres: 'Pablo Ern...', Cargo: 'Gerente', Dpto: 'Contabi...'};
$.each(data, function (i, item) {
console.log('Item(' + i + '): ' + item);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
In this case I suggest to avoid to loop and use directly the json object:
var item = {id: 1, Nombres: 'Pablo Ern...', Cargo: 'Gerente', Dpto: 'Contabi...'};
var rows = "<tr>" +
"<td id='id'>" + item.id + "</td>" +
"<td id='nombres'>" + item.Nombres + "</td>" +
"<td id='cargo'>" + item.Cargo + "</td>" +
"<td id='dpto'>" + item.Dpto + "</td>" +
"</tr>";
$('#Table').append(rows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">
$.ajax pabletoreto
</div>
<div class="panel-body">
ID: <input type="text" id="busqueda"><br/><br/>
<table class="table table-bordered" id="Table">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Departamento</th>
<th>Cargo</th>
</tr>
</table>
</div>
<div class="row">
<div class="col-md-2 offset-md-2">
<button id="boton_de_pabletoreto">Obtener Todos</button>
</div>
<div class="col-md-1">
<button id="boton_de_pabletoreto2">Búsqueda</button>
</div>
</div>
<br/>
</div>
I think that you have wrong for each loop:
Change this:
$.each(data, function (i, item) { // Here is the error
var rows = "<tr>" +
"<td id='id'>" + item.id + "</td>" +
"<td id='nombres'>" + item.Nombres + "</td>" +
"<td id='cargo'>" + item.Cargo + "</td>" +
"<td id='dpto'>" + item.Dpto + "</td>" +
"</tr>";
$('#Table').append(rows);
});
With this:
$.each(data, function (item, i) {
var rows = "<tr>" +
"<td id='id'>" + item.id + "</td>" +
"<td id='nombres'>" + item.Nombres + "</td>" +
"<td id='cargo'>" + item.Cargo + "</td>" +
"<td id='dpto'>" + item.Dpto + "</td>" +
"</tr>";
$('#Table').append(rows);
});
The other error is that data is not a list of employees, is an employe. So you are iterating over an object, not a list. Change backend to send a list of employees instead an employe...

Show all the data from table1 with matching records with table2 and show the result in to html table

As shown in Image I have 20 Records in Table1 And 7 in Table2 if I want to Show result like result table against UserID.
and show the result into view from database.
my view code is
<div class="tblContainer">
<table class="table table-striped table-bordered " id="TblRole" cellspacing="0" align="center">
<thead>
<tr>
<th>Roles</th>
<th>CreateAccess</th>
<th>ViewAccess</th>
<th>EditAccess</th>
<th>ReportAccess</th>
</tr>
</thead>
<tbody></tbody>
</table>
and I got the data in jsUsers script is
function SearchUser() {
var EmpCode = $('#EmpCode').val()
alert("Call");
$.ajax({
type: "POST",
url: "/Roles/GetUserRoleInformation",
data: '{ EmpCode: "' + EmpCode + '" }',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
if (data.jsUsers != null) {
alert("User Alredy Exist in FastTrack.");
var rows;
$.each(data.jsUsers, function (i, item) {
rows += "<tr>"
+ "<td>" + item.RoleName + "</td>"
+ "<td>" + item.CreateAccess + "</td>"
+ "<td>" + item.ViewAccess + "</td>"
+ "<td>" + item.EditAccess + "</td>"
+ "<td>" + item.ReportAccess + "</td>"
+ "</tr>";
});
$('#TblRole').append(rows);
}
else {
alert("User Not Created yet.");
}
},
});
}
Please Help to solve this problem.
Try this:
SELECT B.`UserID`, A.`RoleID`, A.`RoleName`, B.`Create`, B.`View`, B.`Edit`
FROM `Table1` A
LEFT JOIN `Table2` B ON A.`RoleID` = B.`RoleID` AND B.`UserID` = 1
Updated Answer:
Simply use your input value as UserID:
SELECT 1 AS `UserID`, A.`RoleID`, A.`RoleName`, B.`Create`, B.`View`, B.`Edit`
FROM `Table1` A
LEFT JOIN `Table2` B ON A.`RoleID` = B.`RoleID` AND B.`UserID` = 1
Otherwise if you pass the UserId as parameter.
Then use the parameter:
SELECT #ParamValue AS `UserID`, A.`RoleID`, A.`RoleName`, B.`Create`, B.`View`, B.`Edit`
FROM `Table1` A
LEFT JOIN `Table2` B ON A.`RoleID` = B.`RoleID` AND B.`UserID` = #ParamValue

JSON Formatting Issue?

I am trying to populate an html table of JSON data. I was provided the JSON data and cannot determine why it isn't populating but suspect the JSON may not be formatted properly. When I use other sample data it works, then when I sub in the JSON I was provided it doesn't work. I've tried copying the JSON into a file on my direct server, linking to what I was provided (here: https://boiling-fortress-75456.herokuapp.com/) and inserting it on myjson.com and reformatting the JSON data.
Here is my code:
<script>
$(function() {
var entries = [];
var dmJSON = "https://api.myjson.com/bins/6sjud?callback=?";
$.getJSON(dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
});
});
</script>
<div class="wrapper">
<div class="profile">
<table id= "incentive" border="1">
<thead>
<th>Rank</th>
<th>Name</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>Highest Rank</th>
<th>Personal Volume</th>
<th>Team Volume</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
You need to get the objects from affiliate
$.each(data.affiliate, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
Response from service
{
"affiliate":[{
"rank":1,"name":"Sally","march_rank":"Gold","april_rank":"Silver","may_rank":"Silver","highest_rank":"Silver","team_volume":12345
},{
"rank":2,"name":"Zelda","march_rank":"Gold","april_rank":"Bronze","may_rank":"Silver","highest_rank":"Gold","team_volume":12345
}
]
}

Firebase child_changed for tables

When using child_added to populate a table, I use append() to show the data on the HTML table, but how do I do it with child_changed? Should I delete the row and then append a new one with the changed information? If so, how do I delete this row? Or maybe use something else instead of append() to update the data on the HTML table?
HTML Table
<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr id="tableHeader">
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Brand</th>
<th class="mdl-data-table__cell--non-numeric"> </th>
</tr>
</thead>
<tbody id="table_body"> </tbody>
</table>
JavaScript
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr data-id='"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
For child added use id in tr
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr id='row"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
For Child Changed
rootRef.on("child_changed", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
editrow = "row"+assetKey;
document.getElementById("editrow").innerHTML = "<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td>");
});
This will help.

Categories

Resources