2017-10-14 34 views
0

フォームを作成しようとしています。あなたの情報を入力し、送信を押すと、送信した内容を示す新しいページが開きます。下部には、入力したすべての連絡先情報を含む新しいページにリダイレクトするボタンもあります。オブジェクト(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> 

答えて

0

変更この:これに

render (res, "contacts", allInfo); 

:テンプレートはちょうど配列が渡されるオブジェクトラッパーなし

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

を、それはあなたがallInfoそれを呼ばれることを知ることができません。

繰り返し変数にipersonの両方を使用すると、テンプレートに矛盾があります。

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

また、forEachに変更することもできます。

あなたはこのような分野のいくつかの問題点も持っている:これでなければなりません

<%= street %> 

<%= allInfo[i].street %> 
+0

はありがとうございました!!それは今働いている! –

関連する問題