【问题标题】:How do you send JSON from the server to an EJS file and parse it?如何将 JSON 从服务器发送到 EJS 文件并解析它?
【发布时间】:2013-12-15 22:12:40
【问题描述】:

我在我的 Node.js/Express 应用程序中添加了一个网络表单,我正在尝试为其设置验证和清理,但我遇到了解析问题。我正在使用 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...');

提交组织.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) %>

让我知道这些信息是否足够,或者你们是否需要进一步详细了解我在这里要完成的工作。

  • 史蒂夫

【问题讨论】:

  • 你的意思是&lt;%= errors.name.msg %&gt;
  • 是的,我尝试了 ,但仍然出现错误。类型错误:/Applications/XAMPP/xamppfiles/htdocs/TSF2.0/public/views/submit-organization.ejs:4 2|
    3|
    >> 4| 5|
    6|....
  • 我认为如果 errors 实际已填充,您需要检查您的模板。但是为了确保,您可以编辑您的问题并发布整个错误消息(包括堆栈跟踪)吗?

标签: json node.js validation express ejs


【解决方案1】:

@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 %>

【讨论】:

  • 请忽略我关于在 EJS 中不能循环遍历 JSON 对象的评论。实际上,您可以这样做,在他们的 [网站] (embeddedjs.com) 上有一个很好的例子。我应用了他们的代码来循环遍历供应品列表。我仍然必须从 mappedErrors 变量中获取 server.js 文件中的每个验证错误,然后使用 JSON 将这些值传递给我的 EJS 模板(我将其与 EJS 主页的 JSON 示例相匹配)
猜你喜欢
相关资源
最近更新 更多
热门标签