I'm a newbie in nodejs and i'm learning to use handlebars to render a website.
Here is my routing (inside index.js)
app.get('/house', function (req, res) {
var houses = [
{
name: "House a",
address: "Address a",
price: "Price a"
},
{
name: "House b",
address: "Address b",
price: "Price b"
},
{
name: "House c",
address: "Address c",
price: "Price c"
}
]
res.render('house', houses);
})
Here is my house.handlebars
<div class="row">
{{#each houses}}
<div class="col-md-3 col-lg-3">
<p>Name: {{name}}</p>
<p>Address: {{address}}</p>
<p>Price: {{price}}</p>
</div>
{{/each}}
</div>
The problem is when i go to http://localhost:3000/house, the page is all white and render nothing. I inspected the site and notice that everything inside {{each houses}} and {{/each}} disappear.
I'm wondering what are the problems here.
Many thanks
Your object structure is incorrect. try this:
res.render('house', {houses: houses});
Related
I made a request to my backend and brought all the categories to the homepage. From there I redirected to a page called [category_slug].jsx.
I'm getting data with useEffect and I'm pulling it from the context api
categories.map((category) => (
<Link
href={{ pathname: `/categories/${category.category_slug}`, query: category }}
className="text-sm hover:underline hover:opacity-60"
key={category.id}
>
{category.name}
</Link>
))
Also, I used this method before to make the page with the videos and it worked then.
All data comes to that page, but the videos come with 2 empty strings, but it should not come as such.
{
"id": "9",
"name": "test2",
"category_slug": "test2",
"description": "testt2",
"videos": [
"",
""
],
"image": "",
"created": "2022-12-07T02:07:05.838815Z",
"updated": "2022-12-07T02:07:05.838840Z"
}
My [id] page:
import React from "react";
const CategoryPage = () => {
const router = useRouter()
const category = router.query;
console.log(category)
// captilaze first letter and lowercase the rest
const capitalize = (s) => {
if (typeof s !== "string") return "";
return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
};
return (
<>
{ /* <CustomHead title={capitalize(category.name)} />*/}
<div className="my-10 mx-auto flex min-h-screen px-24 py-10 ">
<div className="flex w-full flex-col bg-white p-10">
{ /* <h1 className="text-2xl font-bold up capitalize">{category.name}</h1>*/}
<div className="mt-10 grid grid-cols-1 place-items-center gap-2 md:grid-cols-3">
</div>
</div>
</div>
</>
);
};
export default CategoryPage;
Please excuse me if I didn't express myself very well.
This my first time I use sendgrid for mail. I have problem with dynamic data passed from database. Actually HTML content passed in object and display as it is in mail. For more detail check below object.
{
to: "to Email"
from: "from email",
templateId: "Template ID",
dynamicTemplateData: {
subject: "Testing Templates",
name: "Some One",
city: "Denver",
week: "August 24 2020",
job0: {
header: "Test",
body: "<table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="
snip ">We are looking for physically fit individuals to fill general labour requirements by partnering with a truck driver. Your help is needed to load/unload the truck at the various job sites. <b>Skills required: </b> - comfortable with physical exertion and lifting minimum of 50lbs - works well on a team but trusted to work independently - reliable, self-motivated and committed to high standards of quality - able to read and understand work instructions <b>Specific requirements: </b> - in good physical condition - must have own safety footwear - reliable transportation to ensure punctual and consistent attendance If you meet the qualifications listed above, submit your resume in MS Word format via the link below. <i>Previously employed with The Staffing Connection? Please contact our office to confirm your continued availability for these upcoming positions.</i></td> </tr> </tbody> </table>",
cta: "Apply now",
url: "My URL"
},
}
}
Code
getJobs().then((jobs) => {
var mailPayload = {
to: emails,
from: "",
templateId: "",
dynamicTemplateData: {
subject: "Testing Templates",
name: "Some One",
city: "Denver",
week: "August 24 2020",
},
};
for (let i = 0; i < jobs.length; i++) {
mailPayload.dynamicTemplateData["job" + i] = {
header: jobs[i].job_title,
body: jobs[i].job_description,
cta: "Apply now",
url: jobs[i].company_url,
};
}
mail(mailPayload);
res.send("Mail sent Successfully").status(200);
});
});
Here is the Output
Please help me to solve this issue.
I am using Tabulator version 4.3 and trying to print a table (which has columnCalcs: both) using print function. I have set printCopyStyle:true, but the output of print does not include footer row (column calculation at the bottom of the table); also alignment of numbers which is set to right does not appear right aligned. The footer and alignment both appear correctly in the Tabulator table, but not in print copy.
Please check jsfiddle here.
Are these features not available or am I missing something?
const tabledata = [{
dep: "A",
name: "Oli Bob",
score: 100
},
{
dep: "A",
name: "Jamie Newhart",
score: 120
},
{
dep: "D",
name: "Gemma Jane",
score: 90
},
{
dep: "D",
name: "James Newman",
score: 100
},
];
const table = new Tabulator("#example-table", {
height: "250px",
data: tabledata,
groupBy: "dep",
columnCalcs: "both",
printAsHtml: true,
printCopyStyle: true,
columns: [{
title: "Name",
field: "name",
width: 200
},
{
title: "Score",
field: "score",
align: "right",
bottomCalc: "sum"
},
],
});
<head>
<link href="https://unpkg.com/tabulator-tables#4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
<button type="button" id="report-print" onclick="table.print();">Print </button>
<div id="example-table"></div>
</body>
In Tabulator, how can I make the horizontal alignment of column headers match the column data, or perhaps manage them individually. A column of centered data looks odd with a left-aligned header.
I am very new at this but I have been through the Tabulator info pages, the bitbucket pages, and searched here. It seems like there might be some way by creating some formatter functions but that seems very obscure for such a basic function.
Thanks, Sam.
there is now an available property for each column:
var table = new Tabulator("#example-table", {
columns:[
{title:"Name", field:"name", headerHozAlign:"right"}, //right align column header title
],
});
Use CSS
.tabulator-col-title {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css">
</head>
<body>
<div id="example-table"></div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
</body>
</html>
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150,
align: "center"
},
{
title: "money",
field: "money",
align: "left",
formatter: "money",
align: "center"
},
{
title: "Favourite Color",
field: "col",
align: "center"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
]
});
const setAlignment = function(index, alignment) {
$($('.tabulator-col-title')[index - 1]).css("text-align", alignment);
}
.tabulator-col-title {
text-align: center;
}
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="example-table"></div>
<button onClick="setAlignment(4,'right')">Set Alignment</button>
</body>
</html>
As provided by dota2pro, .tabulator-col-title { text-align: center; } achieves bulk alignment of headers. And the solution provided for specific columns also works.
use the following property in the column definition to center the header individually (e.g. centered):
title:'test',
field:'myfield',
titleFormatter: function(cell, formatterParams, onRendered)
{cell.getElement().style.textAlign='center'; return ''+cell.getValue()}
(tested with Tabulator 4.5)
Not able to get parent object's param value
{{#each myObject.details}}
<span class="marginL15 pull-left hidden-xs">
<a href="
/rates
/{{../port_data.name}}
/{{../port_data.name}}
/{{name}}
/{{port_code}}
">
{{name}}
</a>
</span>
{{/each}}
My object is of format
{
"meta_title": "fw",
"port_data": {
"display_name": "Rajkot (INRAJ), Rajkot, India",
"name": "Rajkot",
"port_code": "INRAJ"
},
"details": [
{
"_id": {
"$oid": "58f04ef3c0a35f10b7cc08fa"
},
"display_name": "Sokhna(Al Sokhna) (EGSOK), Suez, Egypt",
"name": "Sokhna(Al Sokhna)",
"port_code": "EGSOK"
},
{
"_id": {
"$oid": "58ff42cfc0a35f493be68031"
},
"display_name": "Rouyn Noranda Airport - CAYUY (YUY), Canada, usa",
"name": "Rouyn Noranda Airport - CAYUY",
"port_code": "YUY"
},
{
"_id": {
"$oid": "58f1c6e9c0a35f2d16dd4f44"
},
"display_name": "Sharjah (AESHJ), Sharjah, United Arab Emirates",
"name": "Sharjah",
"port_code": "AESHJ"
}
]
}
Also tried {{#root.port_data.name}} but to no use.
When passing myObject.details to the {{#each}} helper, you pass only the referenced array stored in the details field of myObject variable - there is no way to look up to something stored in ../, as there's nothing there.
What you could do:
{{#myObject}}
{{#each details}}
<span class="marginL15 pull-left hidden-xs">
<a href="/rates
/{{../port_data.name}}
/{{name}}
/{{port_code}}
">
{{name}}
</a>
</span>
{{/each}}
{{/myObject}}
It gives you an access to the whole myObject variable one scope above the {{#each}} loop.