Data is not Render into EJS Page in Node JS - javascript

I am trying to render the data to EJS page but I was not able to send the data into EJS page. Currently, I am receiving the data as a recordset from MSSQL database. Below screenshot gives the outcome of console.log(rows).
[https://i.stack.imgur.com/CItXQ.jpg][1]
Coding for Database:
app.get('/data', receiveData);
function receiveData(req, res) {
db.executeSql("SELECT * FROM arduino", function (recordsets, err, ) {
var data = JSON.stringify(recordsets);
if (err) {
httpMsgs.show500(request, res, err);
}
else {
var Jdata = JSON.parse(data);
console.log(Jdata);
res.render('arduino',{Jdata:Jdata});
}
});
}
Coding for Ejs
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<th> - </th>
<th>ID</th>
<th>Machine</th>
<th>Start Time</th>
<th>End Time</th>
<th>Length Time</th>
<th> Day/Night</th>
<th>Job Number</th>
</tr>
<% if(Jdata.length){
for(var i = 0;i < Jdata.length;i++) { %>
<tr>
<td><%=(i+1)%></td>
<td> </td>
<td><%=Jdata.recordset[0].Id %></td>
<td><%=Jdata.recordset[0].StartTime%></td>
<td><%=Jdata.recordset[0].EndTime%></td>
<td><%=Jdata.recordset[0].LengthTime%></td>
<td><%=Jdata.recordset[0].Day%></td>
<td><%=Jdata.recordset[0].JobNumber%></td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">No Data</td>
</tr>
<% } %>
</table>
It would be great if anyone can help me out.
Thanks.

I hope below answer will fix your problem. You are using Jdata.length instead of Jdata.recordset.length. As per the console log, I understand this.
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<th> - </th>
<th>ID</th>
<th>Machine</th>
<th>Start Time</th>
<th>End Time</th>
<th>Length Time</th>
<th> Day/Night</th>
<th>Job Number</th>
</tr>
<% if(Jdata.recordset.length){
for(var i = 0;i < Jdata.recordset.length;i++) { %>
<tr>
<td><%=(i+1)%></td>
<td> </td>
<td><%=Jdata.recordset[0].Id %></td>
<td><%=Jdata.recordset[0].StartTime%></td>
<td><%=Jdata.recordset[0].EndTime%></td>
<td><%=Jdata.recordset[0].LengthTime%></td>
<td><%=Jdata.recordset[0].Day%></td>
<td><%=Jdata.recordset[0].JobNumber%></td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">No Data</td>
</tr>
<% } %>
</table>

Oh, that was easy, don't use <%, use <%- instead. For example:
<%- Jdata.length %>
<%= will render in HTML <%- will render variables (as they are, eval)

In my case, the error was that I was trying to access an array instead of an single object.
So, I changed model.find() to
model.findOne({username:req.params.username},(err,user)=>{
if(err) res.send(err)
res.render("home",{user:user})
})
on ejs you get these user proprieties :
<p><%=user.username%></p>.

Related

Merging rows using javascript

This is the Category model:
var mongoose = require("mongoose");
var categorySchema = new mongoose.Schema({
name:String,
image:String,
description:String,
series: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Series"
}
]
});
module.exports= mongoose.model("Category",categorySchema);
And This is the series model
var mongoose=require("mongoose");
//making the schema
var seriesSchema = new mongoose.Schema({
name:String,
type:String,
application:String,
product:[{
type: mongoose.Schema.Types.ObjectId ,
ref:"Product"
}]
});
module.exports=mongoose.model("Series",seriesSchema);
So each Category includes some series that has a name and an application and series in an array.
My table and this is the original code:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% Category.series.forEach(function(series){ %>
<tr>
<td><strong><%=series.name%></strong></td>
<td><em><%=series.application%></em></td>
</tr>
<% }); %>
</tbody>
</table>
I want to merge rows that have the same content. I tried to use a for loop which ended up screwing the whole thing new results:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% for(var i=1;i<series.length;i++){ %>
<tr>
<td><strong><%=series[i-1].name%></strong></td>
<% var j=1;%>
<% console.log(series[i]);%>
<% if(series[i-1].application==series[i].application){ %>
<% j++; %>
<td rowspan="<%=j%>"><em><%=series[i-1].application%></em></td>
<% } else { %>
<td><em><%=series[i-1].application%></em></td>
<% } %>
<% j=0;%>
</tr>
<% }; %>
</tbody>
</table>
As far as I can see, you really don't have rows with equal content in them. They either differ in the first column or in both. Anyway, it appears to me as if you'd try to combine the rows if their contents are equal in the second column.
In case it is OK to loose the information inside the first column, you'll want to just skip the entire row. Just move the comparison before you render the <tr>. Don't forget that you have to render the first row in any case. For example:
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% for(var i = 0; i < series.length; i++){ %>
<% if(i < 1){ %>
<tr>
<td>
<strong>
<a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
</a>
</strong>
</td>
<td>
<em><%=series[i].application%></em>
</td>
</tr>
<% } else if(series[i-1].application !== series[i].application){ %>
<tr>
<td>
<strong>
<a href="/categories/<%=Category._id%>/series/<%=series[i]._id%>/products"><%=series[i].name%>
</a>
</strong>
</td>
<td>
<em><%=series[i].application%></em>
</td>
</tr>
<% }; %>
<% } %>
</tbody>
</table>
The other possibility would be to combine the values of the first column. Solving that inside the loop is going to get fuzzy. It's easier to combine the information before you render them, although you have to utilize a bit more extra JavaScript for it. The JS changes the structure in such a way, that it merges contents in the first column together (link in the code below) if they have the same application:
function mergeEqApplications (series) {
return series.reduce(function (acc, s) {
if (!acc.hasOwnProperty(s.application)) {
acc[s.application] = {
link: [{name: s.name, id: s._id}],
application: s.application
};
} else {
acc[s.application].link.push({name: s.name, id: s._id});
}
return acc;
}, {});
}
function objToArray (obj) {
return Object.keys(obj).map(function (key) { return obj[key]; });
}
function convert (series) {
return objToArray(mergeEqApplications(series));
}
Category.series = convert(Category.series);
<table class="table">
<thread>
<tr>
<th scope="col" class="mytable">Series Name</th>
<th scope="col" class="mytable">Series Application</th>
</tr>
</thread>
<tbody>
<% Category.series.forEach(function (series) { %>
<tr>
<td>
<strong>
<% series.link.forEach(function (info) { %>
<a href="/categories/<%= Category._id %>/series/<%= info.id %>/products">
<%= info.name %>
</a>
<% }); %>
</strong>
</td>
<td>
<em><%= series.application %></em>
</td>
</tr>
<% }); %>
</tbody>
</table>

How to use *ngIf condition inside the <td> field of table using angular where *ngFor is looping?

Actually in my component.ts file i have used the api to call the method and it is returning me array of objects.
And my problems began as I m trying to use ngIf in tag to hide/show column according to the client.auditorGroup as it is either true or false(it is of type boolean) but it is not giving me access:
1st code:
ngOnInit() {
this.http.get('http://localhost:8080/api/selections')
.subscribe((data: any[]) => {
this.clients = data;
console.log(this.clients);
this.chRef.detectChanges();
const table: any = $('table');
this.dataTable = table.DataTable();
});
}
And in my html code I have used this Edit Delete and it is h
<table class="table table-bodered">
<thead>
<tr>
<th>Mag No</th>
<th>SelectionDate</th>
<th> SelectedBy</th>
<th>PanEximNumber</th>
<th>Name</th>
<th>Address</th>
<th>PhoneNumber</th>
<th>SelectionType</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{client.selectionId}}</td>
<td>{{client.selectionDate}}</td>
<td>{{client.selectedBy}}</td>
<td>{{client.panEximNumber}}</td>
<td>{{client.name}}</td>
<td>{{client.address}}</td>
<td>{{client.phoneNumber}}</td>
<td>{{client.selectionType}}</td>
<td *ngIf="{{client.auditorGroup}}==false">Edit Delete</td>
</tr>
</tbody>
</table>
Remove the interpolation {{}} when using *ngIf
<td *ngIf="!client.auditorGroup">Edit Delete</td>

How to make footable work in a table that's being populated with JS from JSON?

I have something like this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th>ID</th>
<th>FieldA</th>
<th data-hide="all">FieldB</th>
<th data-hide="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then a JS like this:
var fillThatTable = function (list) {
$.each(list, function (index, item) {
$('#thatTable tbody').append($('<tr>')
.append($('<td>').text(item.ID))
.append($('<td>').text(item.FieldA))
.append($('<td>').text(item.FieldB))
.append($('<td>').text(item.FieldC))
)
);
});
};
Everything works fine, the table gets the data and shows it all. Problem comes when I want to set footable() to that table, like so:
$(document).ready(function () {
fillThatTable();
$('#thatTable').footable();
});
And instead of getting something beautiful, I just receive an average filtered table, almost like I didn't put that $('#thatTable').footable(). I checked the JS are imported, they are. Is it maybe because the table doesn't have anything in the tbody? What am I missing?
Dream:
Reality:
I've updated PM's fiddle to make an easier use of FooTable: http://jsfiddle.net/0pb4x7h6/1
If your html changes to this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th data-name="ID">ID</th>
<th data-name="FieldA">FieldA</th>
<th data-name="FieldB" data-breakpoints="all">FieldB</th>
<th data-name="FieldC" data-breakpoints="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then you can simplify your script to this:
$(document).ready(function () {
var list = [
{"ID":"1","FieldA":"A1","FieldB":"B1","FieldC":"C1"},
{"ID":"2","FieldA":"A2","FieldB":"B2","FieldC":"C2"},
{"ID":"3","FieldA":"A3","FieldB":"B3","FieldC":"C3"}
];
// No need for this
//fillThatTable();
$('#thatTable').footable({
rows: list
});
});

Hide column in javascript

I want to hide the value of column in table, the data of table is bind from database
This is my html code
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th id="th_id_event">Id Event Category</th>
<th>Event Category</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<% objLOV.forEach(function (lov) { %>
<tr onclick="callme(this)">
<td id="td_id_event">
<%= lov.id %>
</td>
<td>
<%= lov.event_category %>
</td>
<td>
<%= lov.description %>
</td>
</tr>
<% }) %>
</tbody>
</table>
<% objLOV.forEach(function (lov) { %> is to get data from database
I have tried like this, but the only first column first row get hide, I want hide all the value of the column id
window.onload = function () {
document.getElementById("td_id_event").style.display = "none";
document.getElementById("th_id_event").style.display = "none";
};
my table
my table after i tried to disable
can anyone help me? thank you..
You can only validly have one element with a given id so attempting to reference multiple elements with the same id is unlikely to work. You could use a class for the element instead i.e. replace
<td id="td_id_event"
with
<td class="id_event"
and then use
window.onload = function () {
var ids = document.getElementsByClassName("id_event");
for (var i = 0; i < ids.length; i++) {
ids[i].style.display = "none";
}

Access each individual custom cell with Angular bootstrap calendar

I'm working on an app where I need a calendar skeleton (without the standard events) so I can put tables inside each cell, so I'm using the Angular Bootstrap Calendar with custom cell templates. I have everything working fine in terms of displaying the custom template in each cell and being able to navigate between months, but I need to be able to access each individual day and make data available in each one.
Here's my controller:
(function() {
angular.module('myApp')
.controller('calendarController', function($scope, $state, moment, calendarConfig) {
var vm = this;
calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
calendarConfig.dateFormatter = 'moment';
vm.events = [];
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
$scope.$on('$destroy', function() {
calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
});
});
})();
and the corresponding dayTemplate.html:
<div class="cal-month-day">
<span
class="pull-right"
data-cal-date
ng-click="calendarCtrl.dateClicked(day.date)"
ng-bind="day.label">
</span>
<!--
<small style="position: absolute; bottom: 10px; left: 5px">
There are {{ day.events.length }} events on this day
</small> -->
<!-- <table class="table table-bordered table-condensed"> -->
<table class="table table-bordered table-condensed">
<thead>
<tr>
<td>Station</td>
<td>Position</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" align="top">1</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">2</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">3</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
When using the calendar as it normally is used, you can see that the days.events object has the data, but I need to access that object, or create my own so I can fill my tables. Is there a simple (or even not so simple) way to do that?
Thanks.
UPDATE: I just went back and read the docs and noticed this
An optional expression that is evaluated on each cell generated for
the year and month views. calendarCell can be used in the expression
and is an object containing the current cell data which you can modify
(see the calendarHelper service source code or just console.log it to
see what data is available). If you add the cssClass property it will
be applied to the cell.
Due to my lack of knowledge, I'm not understanding how to use this to override. If I console.log calendarCell in my calendarController it chokes because that object doesn't exist. If I'm reading this correctly, I can intercept the cell data and modify, but I'm not understanding how.
In this case, RTFM turned out to be the correct answer. Per the docs:
<div ng-controller="CellModifierCtrl as vm">
<ng-include src="'calendarControls.html'"></ng-include>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
cell-modifier="vm.cellModifier(calendarCell)">
</mwl-calendar>
</div>
goes with this in the controller:
vm.cellModifier = function(cell) {
console.log(cell);
if (cell.label % 2 === 1 && cell.inMonth) {
cell.cssClass = 'odd-cell';
}
cell.label = '-' + cell.label + '-';
};
and voila!, you have access to the data. I'm still trying to figure out how to pass additional data into the function, but I'll open a separate question for that.

Categories