How to create this code in jade template?
<table>
<tr>
<th>#</th>
<th><input type="checkbox"></th>
<th>User</th>
</tr>
<tr>
<td>1</td>
<td><input type="checkbox"></td>
<td>haacki47</td>
</tr>
I use compiler gulp-jade
I try to use
each val in ["#","<input type='checkbox'>","User"]
But i getting error :=(
A multidimensional array should solve your problem ?
Also instead of passing a HTML inside the data, it is better to handle it in Jade
- var datas = [
- {
- index: "#",
- input: "checkbox",
- name: "user"
- },
- {
- index: "1",
- input: "checkbox",
- name: "haacki47"
- }
- ];
table
each data in datas
tr
td=data.index
td
case data.input
when "checkbox"
input(type="checkbox")
td=data.name
Codepen : http://codepen.io/Pototo/pen/mVeRwm
Related
I am using a node JS app to send an email using amazon SES using the ses.sendTemplatedEmail API
I have also mentioned the template's pure html file for reference if need be
how do i achieve expected output ? i don't know what is going wrong and why it is using scientific when decimal is specified in JSON
test.js
const aws=require('aws-sdk')
const ses = new aws.SES({ apiVersion: "2020-12-01",region:"us-east-1"});
var a = {
"Items": [
{
"timeSinceInactive": 0.00011574074074074075,
"id": "myid1",
"ssid": "myssid",
"deviceName": "devicename1"
},
{
"timeSinceInactive": 0.00009259259259259259,
"id": "myid2",
"ssid": "myssid2",
"deviceName": "devicename2"
}
]
}
b = JSON.stringify(a)
console.log(b)
async function sesSendEmail(b,ses) {
var params = {
Source: "abc#gmail.com",
Template: "mytemplatename",
Destination: {
ToAddresses: ["xyz#gmail.com"] // Email address/addresses that you want to send your email
},
TemplateData: b,
}
try {
await ses.sendTemplatedEmail(params).promise()
}
catch (err) {
console.log(err)
throw new Error(err)
}
};
function setAwsCredentials() {
awsCredentials = {
region: "us-east-1",
accessKeyId: "",
secretAccessKey: ""
};
aws.config.update(awsCredentials);
console.log("Set credentials successfully")
}
setAwsCredentials()
sesSendEmail(b,ses)
template.html
<table border='2' width='1000'>
<tr>
<th>timeSinceInactive</th>
<th>id</th>
<th>ssid</th>
<th>deviceName</th>
</tr>
<thead>
<tr>
{{#each Items.[0]}}
{{/each}}
</tr>
</thead>
<tbody>
{{#each Items}}
<tr>
{{#each this}}
<td>
{{this}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
Current output:
timeSinceInactive id ssid deviceName
1.1574074074074075E-4 myid1 myssid devicename1
9.259259259259259E-5 myid2 myssid2 devicename2
desired output
timeSinceInactive id ssid deviceName
0.00011574074074074075 myid1 myssid devicename1
0.00009259259259259259 myid2 myssid2 devicename2
EDIT
I need to sort the data as well so converting it to a string is not a feasible alternative unfortunately.
Note
I am using createTemlate API from Amazon SES which supports handlebars.. so the html code is using handlebars by default... that is causing the issue its making it in scientific notation for some reason how do i make it decimal only ?
You might consider converting the numbers to strings before passing them to the template. That way you have control over the formatting.
To my mind you should switch to a template that is less generic and make a call to a custom helper that would display the number as you want. The template will look like this one :
<table border='2' width='1000'>
<tr>
<th>timeSinceInactive</th>
<th>id</th>
<th>ssid</th>
<th>deviceName</th>
</tr>
<thead>
<tr>
{{#each Items.[0]}}
{{/each}}
</tr>
</thead>
<tbody>
{{#each Items}}
<tr>
<td>
{{customFormatNumber timeSinceInactive}}
</td>
<td>
{{id}}
</td>
<td>
{{ssid}}
</td>
<td>
{{deviceName}}
</td>
</tr>
{{/each}}
</tbody>
</table>
And here is the custom helper that you could write (this is just an example, probably not the one you want exactly) :
Handlebars.registerHelper('customFormatNumber ', function(item, options) {
retrun item.toPrecision(10)
});
After executing a query, I received the following data which is in Json format which is in myDocData:
data: [
RowDataPacket {
updatedAt: 2020-01-03T18:30:00.000Z,
email: 'charles#hotmail.com',
name: 'charles',
money_spent: 1,
'avg(e.money_spent)': 1
},
RowDataPacket {
updatedAt: 2020-01-11T18:30:00.000Z,
email: 'ank#gmail.com',
name: 'ank',
money_spent: 10,
'avg(e.money_spent)': 6
}
]
angular code:
<table class="content-table" >
<thead>
<tr>
<th>EMAIL</th>
<th>NAME</th>
<th>money spent</th>
<th>UPDATED</th>
<th>AVERAGE</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of myDocData">
<td>{{item.email}}</td>
<td>{{item.name}}</td>
<td>{{item.money_spent}}</td>
<td>{{item.updatedAt}}</td>
<td>{{item.avg(e.money_spent)}}</td>
</tr>
</tbody>
</table>
Issue is that I am unable to display the value given by avg function
(other attributes are displayed correctly).
Change the line:
<td>{{item.avg(e.money_spent)}}</td>
to:
<td>{{item['avg(e.money_spent)']}}</td>
In JS, you can use square bracket notation to get properties of objects.
If you have the control over the back-end code then you can change the query which is returning "avg(e.money_spent)" to "avg(e.money_spent) as avg_money_spent" in this way will not be facing the issue and you can access the value using
<td>{{item.avg_money_spent}}</td>
Or you could also use the previous answer by #Viqas
I can't wrap my head around a looping system I need to make to build up a table from json data. This is what I've got so far (tried some other stuff but I think this illustrates it the best way).
Looping through the headers works fine, it's just the cells I can't get to work.
This is my dummy data:
tableMockData = [
{
"header": "TH 1",
"rows": [
"TH1 - row1",
"TH1 -row2",
"TH1 - row3",
"TH1 - row4"
]
},
{
"header": "TH 2",
"rows": [
"TH2 -row1",
"TH2 - row2",
"TH2 - row3",
"TH2 - row4",
]
},
{
"header": "TH 3",
"rows": [
"TH3 -row1",
"TH3 - row2",
"TH3 - row3",
"TH3 - row4",
]
},
{
"header": "TH 4",
"rows": [
"TH4 - row1",
"TH4 - row2",
"TH4 - row3",
"TH4 - row4",
]
}
]
This is my basic loop as starting point:
<tr *ngFor="let row of tableMockData; let i = index">
<td>{{row.rows[i]}}</td>
</tr>
This is my outcome:
This is my desired outcome:
Can someone point me out in the right direction, I know which cell needs to go where but I simply can't wrap my head around how to loop through it.
Thanks
Update:
here is a stackblitz example:
https://stackblitz.com/edit/angular-cdoqwb
Update your Html with below code
<table>
<tr>
<th *ngFor="let row of tableMockData; let i = index">{{row.header}}
</th>
</tr>
<tr *ngFor="let row of tableMockData; let i = index">
<td *ngFor="let row1 of row.rows">
{{row1}}
</td>
</tr>
</table>
You do not properly bind your JSON.
I have the following firebase JSON object:
"items" : {
"111111111111" : {
"ins" : { <<<<<<<<< I want to display the length of this
"1523878813443" : true,
"1523878891312" : true,
"1523878911379" : true,
"1523879091312" : true
},
"name" : "10",
"outs" : { <<<<<<<<< and this one too
"1523878813443" : true,
"1523878891312" : true,
"1523878911379" : true
},
"ownerID" : "QpMHsVHHRrMvk92rbSQvcYEv4en1"
}
}
Here is the template part on where I am trying to get these values to update:
<tbody>
<tr v-for="item in items" >
<td>
{{item.childone - door.childtwo}}
</td>
<td>
{{item.childone}}
</td>
<td>
{{item.childtwo}}
</td>
</tr>
</tbody>
I got it to display the JSON object like this:
The "In's" column should display 4, the "Out's" should display 3 and the "Balance" column should display 1.
This is the firebase setup and data code on my component:
import firebase { doorsRef } from '../firebase-config';
export default {
firebase() {
return {
items: itemsRef,
}
},
...etc
}
Any kind soul out there who would be willing to help?
Knowing that a JSON object has keys (and values) I have used this on my template instead:
{{Object.keys(JSON.Object).length}}
So in my case this did the trick:
<tbody>
<tr v-for="item in items" >
<td>
{{Object.keys(item.childone).length - Object.keys(item.childtwo).length}}
</td>
<td>
{{Object.keys(item.childone).length}}
</td>
<td>
{{Object.keys(item.childtwo).length}}
</td>
</tr>
</tbody>
Alternative you you can also count the number of values: {{Object.values(JSON.Object).length}}
I am using Kendo for the first time and am attempting to convert an HTML table to a Kendo grid. Upon initialization, I want the table to be grouped by a specific column and not be groupable by any other column. Below is a contrived example of a table of cars to be grouped by the car's make which demonstrates how I am attempting to group by a specific column upon initialization.
This attempt does not cause the table to be grouped. I know the kendoGrid call is working, because if I set groupable to true I am able to group by any column via drag and drop, but the initial grouping still does not occur. I suspect that somehow the group field "make" is not being tied to my make column, but examples I've seen seem to indicate this can be accomplished using data-field as I have done.
<table id="carsGrid">
<thead>
<tr>
<th>Year</th>
<th>Color</th>
<th data-field="make">Make</th>
</tr>
</thead>
<tbody>
<tr>
<td>2010</td>
<td>Red</td>
<td>Dodge</td>
</tr>
<tr>
<td>2014</td>
<td>Blue</td>
<td>Ford</td>
</tr>
<tr>
<td>2016</td>
<td>Black</td>
<td>Dodge</td>
</tr>
</tbody>
</table>
And in the document's ready function:
$('#carsGrid').kendoGrid({
datasource: { group: { field: "make" } },
groupable: false //I do not want grouping on other columns
});
I found some solution for your problem: Check this example http://dojo.telerik.com/OhEta
You should add data-groupable="false" attribute in <th> element:
<thead>
<tr>
<th data-field="year" data-groupable="false">Year</th>
<th data-field="color" data-groupable="false">Color</th>
<th data-field="make">Make</th>
</tr>
</thead>
Instead of using an html <table> you can setup the columns and their values in the javascript.
First you can replace your entire <table></table> section with:
<div id="grid"></div>.
Then in your document's ready function, you can throw your values for each column into an array:
var productsArray = [{Year: 2010, Color: "Red", Make: "Dodge"},
{Year: 2014, Color: "Blue", Make: "Ford"},
{Year: 2016, Color: "Black", Make: "Dodge"}]
And update where you set the kendo grid with:
$("#grid").kendoGrid({
dataSource: {
data: productsArray,
group: {field: "Make"}
},
columns: [
{ field: "Year" },
{ field: "Color" },
{ field: "Make" }
]
});
Click Here for a working example that you can test with.