如何將對象數組（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文件

回答

相關問題