<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Page</title>
</head>
<body>
<h1>List Page</h1>
INSERT DATA
<hr/>
<table width = "100%" border="1">
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td>ID</td>
<td>Name</td>
<td>Model Number</td>
<td>Series</td>
</tr>
<%= data.forEach((item, index) => { %>
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td><%= item.id %></td>
<td><%= item.name %></td>
<td><%= item.modelnumber %></td>
<td><%= item.series %></td>
</tr>
<%= }) %>
</table>
</body>
</html>
I'm currently having a small problem with syntaxError. I checked as
far as i can but i failed. Can you tell me is there some miss typo in
there?
I wanna show this to website but it doesn't give me a hint.. I really
have no clue of where is wrong.. Please help me..
Welcome to SO, You need to put data.foreach() without this ejs tag <%= but this ejs tag <%. So your code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Page</title>
</head>
<body>
<h1>List Page</h1>
INSERT DATA
<hr/>
<table width = "100%" border="1">
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td>ID</td>
<td>Name</td>
<td>Model Number</td>
<td>Series</td>
</tr>
<!-- Here is the first change -->
<% data.forEach((item, index) => { %>
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td><%= item.id %></td>
<td><%= item.name %></td>
<td><%= item.modelnumber %></td>
<td><%= item.series %></td>
</tr>
<!-- Here is the second change -->
<% }) %>
</table>
</body>
</html>
You should use <%%> to contain logic code , such as :
<% data.forEach((item, index) => { %>
<tr>
<td>DELETE</td>
<td>EDIT</td>
<td><%=item.id%></td>
<td><%=item.name%></td>
<td><%=item.modelnumber%></td>
<td><%=item.series%></td>
</tr>
<% }) %>
Related
The issue is on the 3rd row below. With in the href""'s, there is text and an a js script syntax, <%=. for some reason, the <%= is not being recognised as a script insert.
Any idea's on why this is happening and how to fix? I'm using node.js, Express, MongoDB, Mongoose
<% if(users.length > 0) { %>
<% users.forEach(function(user){ %>
<a href="/getUsers/<%= user._id %>">
<tr>
<td><%= user.userId %></td>
<td><%= user.userName %></td>
<td><%= user.userOperator %></td>
<td><%= user.userEmail %></td>
<td><%= user.userMobile %></td>
<td><%= user.userAdminYN %></td>
</tr>
</a>
<% }) %>
<% }else{ %>
I tried adding the script syntax in, and was expecting to see it change colour as it does elsewhere in the core.
Use a template string:
<a href="<%= `/getUsers/${user._id}` %>">
index.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>student manangement System</title>
<link rel="stylesheet"href="https:// use.fontawesome.com/releases/v5.0.7/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
Back
<h1> Student manangement System</h1>
<form>
<input type="search"placeholder="search"id="search">
<input type="button"Value="Add"id="btn">
</form>
<div class="table">
<form action="/"method="POST">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="fname">First Name</th>
<th class="lname">Last name</th>
<th class="loc">Location</th>
<th class="mail">Email</th>
<th class="birth">DOB</th>
<th class="edu">Education</th>
<th class="update">Action</th>
<th class="del">Delete</th>
</tr>
</thead>
<tbody>
<% for(var i=0;i<users.length;i++){ %>
<tr>
<td><%= i+1%></td>
<td><%= users[i].Firstname %></td>
<td><%= users[i].Lastname %></td>
<td><%= users[i].Location %></td>
<td><%= users[i].Email %></td>
<td><%= users[i].Dob %></td>
<td><%= users[i].Education %></td>
<td class="update">Edit</td>
<td class="del">Delete</td>
</tr>
} %>
</table>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/assets/js/script.js"></script>
</body>
</html>
Error:
SyntaxError: Unexpected token 'catch' in C:\Users\Nirmal\Desktop\final\views\index.ejs while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass `async: true` as an option.
at new Function (<anonymous>)
at Template.compile (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:673:12)
at Object.compile (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:398:16)
at handleCache (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:235:18)
at tryHandleCache (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:274:16)
at View.exports.renderFile [as engine] (C:\Users\Nirmal\Desktop\final\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\Nirmal\Desktop\final\node_modules\express\lib\response.js:1039:7)
I want to use the "Flat Json"-Bootstrap 5 Table example. [Link][1]
I am using expressjs with nodejs and ejs.
My Code so far:
```<link href="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.js"></script>
<body>
<h2>JOB DASHBOARD</h2>
<table id="table" data-toggle="table" data-flat="true" data-search="true" >
<thead>
<tr>
<th data-field="" data-sortable="true">Order ID</th>
<th data-field="" data-sortable="true">Liefertermin</th>
<th data-field="" data-sortable="true">Fertigstellungstermin</th>
<th data-field="" data-sortable="true">Keyline Nr</th>
</tr>
</thead>
<tbody>
<% var count = 0; %>
<% orders.forEach((order)=>{ %>
<tr data-index="<%= count %>">
<td><%= order.order_id %></td>
<td><%= order.due_at %> </td>
<td><%= order.deliver_at %> </td>
<td><%= order.keyline_obj.event.data.attributes.reference %> </td>
</tr>
<% count +=1; %>
<% }) %>
</tbody>
</table>
</body>
</html>```
I am loading the content from my mongoDB Database. The Variable "orders" is an array of order documents.
At the moment the data is loading but the searchfield doesnt appear at all and all the styling doesnt work although I have loaded the bootsrap css and js.
[1]: https://examples.bootstrap-table.com/index.html?bootstrap5#welcomes/flat-json.html
i think the problem is that the is successfully sent but the respond is in json as the browser waiting
you can check data is received or not by => clicking right click on the screen =>press inspect => Network => click on the page file => then choose Response
you will find your html page with the updated data in it
you can render it from your js script after fetching api like so
await fetch(----your fetching code-----).then(res=>{
document.open();
res.text().then(function(text) {
document.write(text)
});
})
I am looking for a solution for my EJS template. I am working on a project and I have completed about 50% of it. Currently I am working on a web page where I have to display the SQL data into EJS web template.
I have posted my coding which is i am working on it.
data is receiving from database (I checked with console.log and I posted the Json out put).
I tried all the possible ways to work it out but I did not get the result. It would be great if someone could help me..
Thanks in advance.
/* app.js */
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);
res.render('arduino',{Jdata:Jdata});
console.log(data);
}
});
}
/* arduino.ejs */
<html>
<head>
<body>
<div class="page-data">
<div class="data-table">
<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[i].Machine%></td>
<td><%=Jdata[i].StartTime%></td>
<td><%=Jdata[i].EndTime%></td>
<td><%=Jdata[i].LengthTime%></td>
<td><%=Jdata[i].Day%></td>
<td><%=Jdata[i].ID %></td>
<td><%=Jdata[i].JobNumber %></td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">No Data</td>
</tr>
<% } %>
</table>
</div>
</div>
</body>
</head>
</html>
{"recordsets":[[{"ID":1,"Machine":"TRUMPF 5000","StartTime":"2018-11-01T15:28:51.000Z","EndTime":"2018-11-01T15:52:11.000Z","LengthTime":271,"Day":"Day","JobNumber":null}]]
After initialize ejs variable, i cant change value and increment operator not working.
Here is my code:
<% results1.forEach(function(result1, index){ %>
<% results2.forEach(function(result2, index1){ %>
<% if(result1.id==result2.parent)
{
var i=1; %>
<tr>
<td><%= index+1 %>.<%= i %></td>
<td><%= result2.title %></td>
<td><%= result1.title %></td>
<td align="center"><%= result2.views %></td>
</tr>
<% i++;
} %>
<% }); %>
<% }); %>
In the above code I declared a variable i and bottom I added i++.
i should be declared outside forEach statement, otherwise is redeclared at every cicle
correct the code as above
<% results1.forEach(function(result1, index){ %>
<% var i=1; results2.forEach(function(result2, index1){ %>
<% if(result1.id==result2.parent)
{
<tr>
<td><%= index+1 %>.<%= i %></td>
<td><%= result2.title %></td>
<td><%= result1.title %></td>
<td align="center"><%= result2.views %></td>
</tr>
<% i++;
} %>
<% }); %>
<% }); %>