如何将对象数组（Node.JS）传递给EJS文件

我正在尝试创建表单。您输入您的信息，点击提交，然后打开一个新页面，显示您提交的内容。在底部还有一个按钮，它将重定向到一个包含您输入的所有不同联系信息的新页面。如何将对象数组（Node.JS）传递给EJS文件

我有一个问题，从我的JavaScript文件传递给我的EJS文件（formserver.js到contacts.ejs）的变量。我不断收到一个错误，我的对象数组尚未传递（contacts.ejs的第16行）。

我想知道是否有人可以帮助解释为什么我的对象数组没有被传递到EJS文件，以及我可以做些什么来补救。

下面是代码：

formserver.js

var connect = require("connect"); 
var logger = require("morgan"); 
var http = require("http"); 
var ejs = require('ejs'); 
var bodyparse = require('body-parser'); 


var app = connect() 
    .use (logger('dev')) 
    .use (bodyparse()) 
    .use (serve); 

http.createServer(app).listen(3000); 

var allInfo = new Array; 

function serve(req, res) 
{ 
    //console.log("Entered ", req.url); 
    var gender = req.body.gender; 
    var firstName = req.body.firstName; 
    var lastName = req.body.lastName; 
    var street = req.body.street; 
    var city = req.body.city; 
    var state = req.body.state; 
    var zip = req.body.zip; 
    var phone = req.body.phone; 
    var email = req.body.email; 
    var contact = req.body.contact; 
    var mail = req.body.mail; 

    var form = {gender: gender, fname : firstName, lname : lastName, street : street, 
      city : city, state: state, zip: zip, phone : phone, email: email, mail: mail } 



    if (req.url == "/mailer") 
    { 

     }) 
}

contacts.ejs

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<p> <% allInfo %> </p> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Address</th> 
     <th>Phone</th> 
     <th>Email</th> 
     <th>Contact by mail?</th> 
    </tr> 

    <% for (var person in allInfo) { %> 
    <tr> 
     <td><%= allInfo[i].gender %>. <%= allInfo[i].fname %> <%= allInfo[i].lname %></td>    
    </tr> 

    <tr> 
     <td> <%= street %>, <%= city %>, <%= state %> <%= zip %></td> 
    </tr> 

    <tr> 
     <td><%= phone %></td> 
    </tr> 

    <tr> 
     <td><%= email %></td> 
    </tr> 

    <tr> 
     <td><%= mail %></td> 
    </tr> 

    <% } %> 
</table>

mailer.ejs

<!DOCTYPE html> 
    <html> 
    <body> 
    <form action = "/submit" method = "post"> 
     <fieldset style = "width:500px"> 
     <p> 
      <div> 
      <input type = "radio" name = "gender" value = "Mr"> Mr. 
      <input type = "radio" name = "gender" value = "Mrs"> Mrs. 
      <input type = "radio" name = "gender" value = "Ms"> Ms. 
      <input type = "radio" name = "gender" value = "Dr"> Dr. 
      </div> 
     </p> 
     <p> 
     <div> 
      <label for = "first">First Name: </label> 
      <input type = "text" name = "firstName" required> 
      <label for = "last">Last Name:</label> 
      <input type = "text" name = "lastName" required> 
     </div> 
     </p> 
     <p> 
     <div> 
      <label for = "street" > Street: </label> 
      <input type = "text" name = "street" location = "street"> 
      <label for = "city" name = "city"> City: </label> 
      <input type = "text" name = "city" location = "city"> 
     </div> 
     </p> 
     <p> 
     <div> 
      <label id = "state" for = "state" name = "state">State: </label> 
      <select name = "state" id = "state"> 
       <option value = "" disabled = "disabled" selected = "selected"> </option> 
       <option value = "NJ""> NJ </option> 
       <option value = "NY"> NY </option> 
       <option value = "PA"> PA </option> 
       <option value = "CT"> CT </option> 
      </select> 
      <label for = "zip"> Zip: </label> 
      <input type = "text" name = "zip" location = "zip"> 
     </div> 
     </p> 

     <p> 
     <div> 
      <label for = "phone" >Phone:</label> 
      <input type = "text" name = "phone" location = "phone"> 
     </div> 
     </p> 

     <p> 
     <div> 
      <label for = "email" >Email:</label> 
      <input type = "text" name = "email" location = "email"> 
     </div> 
     </p> 

     <p> 
     <div> 
      <label for = "contact" name = "contact"> How may we contact you? </label> 
      <input type = "checkbox" name = "contact" value = "yPhone"> Phone </input> 
      <input type = "checkbox" name = "contact" value = "mail"> Mail </input> 
      <input type = "checkbox" name = "contact" value = "yEmail"> Email </input> 
      <input type = "checkbox" name = "contact" value = "any" checked> Any </input> 
     </div> 
     </p> 
     </fieldset> 

     <div> 
      <button type = "submit" name = "submit" value = "submit"> Send me spam forever! </button> 
     </div> 
    </form> 
     <p><a href = "/contacts"> View list of contacts! </a></p> 
    </body> 
    </html> 

submit.ejs 
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div><strong> Contact Information Submitted </strong></div> 
    <div><strong> Name: <%= gender %>. <%= fname %> <%= lname %> </strong></div> 
    <div><strong> Address: <%= street %>, <%= city %>, <%= state %> <%= zip %></strong></div> 
    <div><strong> Contact by Phone: <%= phone %> </strong></div> 
    <div><strong> Contact by Mail: <%= mail %></strong></div> 
    <div><strong> Contact by Email: <%= email %> </strong></div> 


    <p><a href = "/contacts"> View list of contacts! </a></p> 
</body> 
</html>

来源

2017-10-14 A K

更改此：

render (res, "contacts", allInfo);

这样：

render (res, "contacts", {allInfo: allInfo});

没有对象包装的模板将只是传递一个数组，它不会知道你把它称为allInfo。

您在模板中也存在不一致，对迭代变量使用i和person。我建议将其更改为：

<% for (var i = 0 ; i < allInfo.length ; i++) { %>

或者，您可以将其更改为forEach。

你还要问题的一些领域，如这一点：

<%= street %>

这应该是这样的：

<%= allInfo[i].street %>

来源

2017-10-14 17:39:06 skirtle

太感谢你了！它正在工作！ –

如何将对象数组（Node.JS）传递给EJS文件

回答

相关问题