[英]How do you send JSON from the server to an EJS file and parse it?
我在Node.js / Express應用程序中添加了一個Web表單,並嘗試為其設置驗證和清理功能,但是我遇到了解析問題。 我正在使用Express-Validator中間件和Node-Validator模塊進行驗證和清理。 到目前為止,看來我已正確安裝了它們,並且還能夠輸出要在模板上解析的JSON的字符串化版本。
這是我的代碼:
Server.js
var express = require ('express'),
organization = require('./routes/organizations'),
expressValidator = require('express-validator'),
check = require('validator').check,
sanitize = require('validator').sanitize,
Validator = require('validator').Validator;
var app = express();
app.configure(function () {
app.use(express.logger('dev')); /* 'default', 'short', 'tiny', 'dev' */
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/views', express.static(__dirname + '/public/views'));
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.session({ secret: 'keyboard cat' }));
app.set('view engine', 'ejs');
app.use(expressValidator());
app.use(app.router);
});
app.set('views', __dirname + '/public/views');
app.get('/', function(req, res){
res.render('index');
});
app.get('/submit-organization', function(req, res){
res.render('submit-organization', {
title: 'Form Validation Example is currently Valid',
message: '',
errors: ''
});
});
//Post
app.post('/submit-organization', function(req,res){
/**
req.onValidationError(function (msg) {
var errors = req.validationErrors();
var mappedErrors = req.validationErrors(true);
console.log("errors are: " + mappedErrors);
res.render('submit-organization',{errors: msg});
});
req.check('name', 'Name is required').notEmpty();
req.check('description', 'A description is required').notEmpty();
**/
req.assert('name', 'Name is required').notEmpty();
req.assert('description', 'A description is required').notEmpty();
var errors = req.validationErrors();
var mappedErrors = req.validationErrors(true);
//console.log(mappedErrors);
res.render('submit-organization',{errors: mappedErrors});
});
app.listen(3002);
console.log('Listening on port 3002...');
提交- organization.js
<% include header %>
<div class="pure-u-1">
<div style="color:red">
<%- JSON.stringify(errors.name) %>
</div>
<form action="/submit-organization" method="post" class="pure-form pure-form-stacked">
<fieldset>
<legend>Submit Organization</legend>
<p>An organization can be anything from a club to that running group you might be in</p>
<div class="control-group">
<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="My Organizaton Name">
</div>
<div class="control-group">
<label for="category">Category</label>
<select id="category" name="category">
<option>category 1</option>
<option>category 2</option>
<option>category 3</option>
</select>
</div>
<div class="control-group">
<label for="keywords">Keywords</label>
<input id="keywords" type="text" name="keywords" placeholder="running, excerise, beer, blah">
</div>
<div class="control-group">
<label for="website">Website</label>
<input id="website" type="text" name="website" placeholder="www.example.com">
</div>
<div class="control-group">
<label for="description">Description</label>
<textarea id="description" name="description" style="width:400px;height:100px;"></textarea>
</div>
<div id="meeting-times">
<h4>When</h4>
<div class="inline-block">
<div class="day"><label>Monday</label></div>
<label>@</label>
<input id="monday-venue" type="text" name="monday_venue" placeholder="Some Place">
<input id="monday-starttime" class="time" type="text" name="monday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="monday-endtime" class="time" type="text" name="monday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Tuesday</label></div>
<label>@</label>
<input id="tuesday-venue" type="text" name="tuesday_venue" placeholder="Some Place">
<input id="tuesday-starttime" class="time" type="text" name="tuesday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="tuesday-endtime" class="time" type="text" name="tuesday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Wednesday</label></div>
<label>@</label>
<input id="wednesday-venue" type="text" name="wednesday_venue" placeholder="Some Place">
<input id="wednesday-starttime" class="time" type="text" name="wednesday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="wednesday-endtime" class="time" type="text" name="wednesday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Thursday</label></div>
<label>@</label>
<input id="thursday-venue" type="text" name="thursday_venue" placeholder="Some Place">
<input id="thursday-starttime" class="time" type="text" name="thursday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="thursday-endtime" class="time" type="text" name="thursday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Friday</label></div>
<label>@</label>
<input id="friday-venue" type="text" name="friday_venue" placeholder="Some Place">
<input id="friday-starttime" class="time" type="text" name="friday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="friday-endtime" class="time" type="text" name="friday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Saturday</label></div>
<label>@</label>
<input id="saturday-venue" type="text" name="saturday_venue" placeholder="Some Place">
<input id="saturday-starttime" class="time" type="text" name="saturday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="saturday-endtime" class="time" type="text" name="saturday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Sunday</label></div>
<label>@</label>
<input id="sunday-venue" type="text" name="sunday_venue" placeholder="Some Place">
<input id="sunday-starttime" class="time" type="text" name="sunday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="sunday-endtime" class="time"type="text" name="sunday_endtime" placeholder="9:00 AM">
</div>
</div>
<button type="submit" class="pure-button pure-button-primary">Post</button>
</fieldset>
</form>
</div>
<% include footer %>
* 在上面的文件中,我得到了以下錯誤之一的JSON:*
<%- JSON.stringify(errors.name) %>
輸出驗證錯誤之一的JSON,看起來像這樣:
{"param":"name","msg":"Name is required","value":""}
但是,我只想在模板上顯示“ msg”對象,但是當我使用如下代碼時卻收到TypeError :
<%- JSON.stringify(errors.name.msg) %>
讓我知道這是否足夠的信息,或者你們是否需要我在這里想要完成的更多詳細信息。
@robertklep,
正在填充。 感謝您的幫助,但我終於明白了。 我一直認為這是錯誤的,因為我認為我可以在EJS模板中編寫代碼以遍歷映射的錯誤。 而不是編寫此代碼(我認為不可能,因為我嘗試了我能想到的所有事情),我為server.js文件中的每個驗證錯誤創建了一個變量,然后通過JSON將其傳遞給我的EJS模板。 如果有人感興趣,這是我的最終代碼:
server.js
var express = require ('express'),
dbConnection = require('./models/dbConnection'),
organization = require('./routes/organizations'),
home = require('./routes/home'),
expressValidator = require('express-validator'),
check = require('validator').check,
sanitize = require('validator').sanitize,
Validator = require('validator').Validator;
var app = express();
app.configure(function () {
app.use(express.logger('dev')); /* 'default', 'short', 'tiny', 'dev' */
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/views', express.static(__dirname + '/public/views'));
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.session({ secret: 'keyboard cat' }));
app.set('view engine', 'ejs');
app.use(expressValidator());
app.use(app.router);
});
app.set('views', __dirname + '/public/views');
app.get('/',home.getOrganizations);
app.get('/submit-organization', function(req, res){
res.render('submit-organization', {
title: 'Form Validation Example is currently Valid',
message: '',
errors: ''
});
});
//Post
app.post('/submit-organization', function(req,res){
req.assert('name', 'Name is required').notEmpty();
req.assert('description', 'A description is required').notEmpty();
var errors = req.validationErrors();
var mappedErrors = req.validationErrors(true);
var myerror1 = mappedErrors.name.msg;
var myerror2 = mappedErrors.description.msg;
res.render('submit-organization',{errors: {error1: myerror1, error2: myerror2}});
});
app.listen(3002);
console.log('Listening on port 3002...');
Submit-organizations.ejs(對不起,我在最初的問題中錯誤地寫了“ submit-organizations.js”):
<% include header %>
<div class="pure-u-1">
<div style="color:red">
<ul>
<li><%- JSON.stringify(errors.error1) %></li>
<li><%- JSON.stringify(errors.error2) %></li>
</ul>
</div>
<form action="/submit-organization" method="post" class="pure-form pure-form-stacked">
<fieldset>
<legend>Submit Organization</legend>
<p>An organization can be anything from a club to that running group you might be in</p>
<div class="control-group">
<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="My Organizaton Name">
</div>
<div class="control-group">
<label for="category">Category</label>
<select id="category" name="category">
<option>category 1</option>
<option>category 2</option>
<option>category 3</option>
</select>
</div>
<div class="control-group">
<label for="keywords">Keywords</label>
<input id="keywords" type="text" name="keywords" placeholder="running, excerise, beer, blah">
</div>
<div class="control-group">
<label for="website">Website</label>
<input id="website" type="text" name="website" placeholder="www.example.com">
</div>
<div class="control-group">
<label for="description">Description</label>
<textarea id="description" name="description" style="width:400px;height:100px;"></textarea>
</div>
<div id="meeting-times">
<h4>When</h4>
<div class="inline-block">
<div class="day"><label>Monday</label></div>
<label>@</label>
<input id="monday-venue" type="text" name="monday_venue" placeholder="Some Place">
<input id="monday-starttime" class="time" type="text" name="monday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="monday-endtime" class="time" type="text" name="monday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Tuesday</label></div>
<label>@</label>
<input id="tuesday-venue" type="text" name="tuesday_venue" placeholder="Some Place">
<input id="tuesday-starttime" class="time" type="text" name="tuesday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="tuesday-endtime" class="time" type="text" name="tuesday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Wednesday</label></div>
<label>@</label>
<input id="wednesday-venue" type="text" name="wednesday_venue" placeholder="Some Place">
<input id="wednesday-starttime" class="time" type="text" name="wednesday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="wednesday-endtime" class="time" type="text" name="wednesday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Thursday</label></div>
<label>@</label>
<input id="thursday-venue" type="text" name="thursday_venue" placeholder="Some Place">
<input id="thursday-starttime" class="time" type="text" name="thursday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="thursday-endtime" class="time" type="text" name="thursday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Friday</label></div>
<label>@</label>
<input id="friday-venue" type="text" name="friday_venue" placeholder="Some Place">
<input id="friday-starttime" class="time" type="text" name="friday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="friday-endtime" class="time" type="text" name="friday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Saturday</label></div>
<label>@</label>
<input id="saturday-venue" type="text" name="saturday_venue" placeholder="Some Place">
<input id="saturday-starttime" class="time" type="text" name="saturday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="saturday-endtime" class="time" type="text" name="saturday_endtime" placeholder="9:00 AM">
</div>
<div class="inline-block">
<div class="day"><label>Sunday</label></div>
<label>@</label>
<input id="sunday-venue" type="text" name="sunday_venue" placeholder="Some Place">
<input id="sunday-starttime" class="time" type="text" name="sunday_starttime" placeholder="8:00 AM"> <label>-</label>
<input id="sunday-endtime" class="time"type="text" name="sunday_endtime" placeholder="9:00 AM">
</div>
</div>
<button type="submit" class="pure-button pure-button-primary">Post</button>
</fieldset>
</form>
</div>
<% include footer %>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.