是否可以让 .js 页面从 .ejs 页面读取值？

Posted 2023-03-11

【中文标题】是否可以让 .js 页面从 .ejs 页面读取值？

【英文标题】：Is it possible to have a .js page read a value from a .ejs page?

【发布时间】：2021-12-29 21:08:29

【问题描述】：

我是所有编程的新手，我正在尝试创建一个网站，最终目标是拥有一个高尔夫记分卡数据库，并按日期和课程名称组织。

我已经开始使用 mongodb 作为我的数据库，我正在使用 mongoose 连接到它。目前我已经整理好，我可以得到一组动态的日期。

我的下一步，也是我卡住的地方，是在我点击所述日期后，该特定日期的记分卡应该是唯一出现的东西。但是，它将显示所有记分卡。 current behavior（是的，我知道总数不相加）

这是我的 app.js 的 sn-p

app.get("/courses", function(req, res) 
//create all the arrays for all the variables for the scorecard
  var arrayCourseDate = []
  var arrayWalkRide = []
  var arrayPaired =[]
  var arrayArinColor = []
  var arrayJasonColor = []
  var arrayArin1 = []
  var arrayArin2 = []
  var arrayArin3 = []
  var arrayArin4 = []
  var arrayArin5 = []
  var arrayArin6 = []
  var arrayArin7 = []
  var arrayArin8 = []
  var arrayArin9 = []
  var arrayArin10 = []
  var arrayArin11 = []
  var arrayArin12 = []
  var arrayArin13 = []
  var arrayArin14 = []
  var arrayArin15 = []
  var arrayArin16 = []
  var arrayArin17 = []
  var arrayArin18 = []
  var arrayArinTotal = []
  var arrayJason1 = []
  var arrayJason2 = []
  var arrayJason3 = []
  var arrayJason4 = []
  var arrayJason5 = []
  var arrayJason6 = []
  var arrayJason7 = []
  var arrayJason8 = []
  var arrayJason9 = []
  var arrayJason10 = []
  var arrayJason11 = []
  var arrayJason12 = []
  var arrayJason13 = []
  var arrayJason14 = []
  var arrayJason15 = []
  var arrayJason16 = []
  var arrayJason17 = []
  var arrayJason18 = []
  var arrayJasonTotal = []
  var arrayPar1 = []
  var arrayPar2 = []
  var arrayPar3 = []
  var arrayPar4 = []
  var arrayPar5 = []
  var arrayPar6 = []
  var arrayPar7 = []
  var arrayPar8 = []
  var arrayPar9 = []
  var arrayPar10 = []
  var arrayPar11 = []
  var arrayPar12 = []
  var arrayPar13 = []
  var arrayPar14 = []
  var arrayPar15 = []
  var arrayPar16 = []
  var arrayPar17 = []
  var arrayPar18 = []
  var arrayParTotal = []

// use mongoose to query a database called Outings.
  Outing.find(function(err, outings) 
    if (err) 
      console.log(err);
     else 
      // create a variable that counts all the entries
      var numberOfEntries = outings.length

      //beginning of the for each loop that pushes all the variables to their respective arrays
      outings.forEach(function(outing) 
        arrayCourseDate.push(outing.courseDate);
        arrayWalkRide.push(outing.walkRide)
        arrayPaired.push(outing.paired)
        arrayArinColor.push(outing.color.Arin)
        arrayArin1.push(outing.hole1.Arin)
        arrayArin2.push(outing.hole2.Arin)
        arrayArin3.push(outing.hole3.Arin)
        arrayArin4.push(outing.hole4.Arin)
        arrayArin5.push(outing.hole5.Arin)
        arrayArin6.push(outing.hole6.Arin)
        arrayArin7.push(outing.hole7.Arin)
        arrayArin8.push(outing.hole8.Arin)
        arrayArin9.push(outing.hole9.Arin)
        arrayArin10.push(outing.hole10.Arin)
        arrayArin11.push(outing.hole11.Arin)
        arrayArin12.push(outing.hole12.Arin)
        arrayArin13.push(outing.hole13.Arin)
        arrayArin14.push(outing.hole14.Arin)
        arrayArin15.push(outing.hole15.Arin)
        arrayArin16.push(outing.hole16.Arin)
        arrayArin17.push(outing.hole17.Arin)
        arrayArin18.push(outing.hole18.Arin)
        arrayArinTotal.push(outing.total.Arin)
        arrayJasonColor.push(outing.color.Jason)
        arrayJason1.push(outing.hole1.Jason)
        arrayJason2.push(outing.hole2.Jason)
        arrayJason3.push(outing.hole3.Jason)
        arrayJason4.push(outing.hole4.Jason)
        arrayJason5.push(outing.hole5.Jason)
        arrayJason6.push(outing.hole6.Jason)
        arrayJason7.push(outing.hole7.Jason)
        arrayJason8.push(outing.hole8.Jason)
        arrayJason9.push(outing.hole9.Jason)
        arrayJason10.push(outing.hole10.Jason)
        arrayJason11.push(outing.hole11.Jason)
        arrayJason12.push(outing.hole12.Jason)
        arrayJason13.push(outing.hole13.Jason)
        arrayJason14.push(outing.hole14.Jason)
        arrayJason15.push(outing.hole15.Jason)
        arrayJason16.push(outing.hole16.Jason)
        arrayJason17.push(outing.hole17.Jason)
        arrayJason18.push(outing.hole18.Jason)
        arrayJasonTotal.push(outing.total.Jason)
        arrayPar1.push(outing.hole1.Par)
        arrayPar2.push(outing.hole2.Par)
        arrayPar3.push(outing.hole3.Par)
        arrayPar4.push(outing.hole4.Par)
        arrayPar5.push(outing.hole5.Par)
        arrayPar6.push(outing.hole6.Par)
        arrayPar7.push(outing.hole7.Par)
        arrayPar8.push(outing.hole8.Par)
        arrayPar9.push(outing.hole9.Par)
        arrayPar10.push(outing.hole10.Par)
        arrayPar11.push(outing.hole11.Par)
        arrayPar12.push(outing.hole12.Par)
        arrayPar13.push(outing.hole13.Par)
        arrayPar14.push(outing.hole14.Par)
        arrayPar15.push(outing.hole15.Par)
        arrayPar16.push(outing.hole16.Par)
        arrayPar17.push(outing.hole17.Par)
        arrayPar18.push(outing.hole18.Par)
        arrayParTotal.push(outing.totalPar)
      ); // end for each loop

      //beginning of section that allows me to use the right side variables from this page to set their value in the ejs page of whatever is on the left

      res.render("newCourses", 
        numberOfEntries: numberOfEntries,
        arrayCourseDate: arrayCourseDate,
        arrayPaired: arrayPaired,
        arrayWalkRide: arrayWalkRide,
        arrayArinColor: arrayArinColor,
        arrayJasonColor: arrayJasonColor,
        arrayArin1: arrayArin1,
        arrayArin2: arrayArin2,
        arrayArin3: arrayArin3,
        arrayArin4: arrayArin4,
        arrayArin5: arrayArin5,
        arrayArin6: arrayArin6,
        arrayArin7: arrayArin7,
        arrayArin8: arrayArin8,
        arrayArin9: arrayArin9,
        arrayArin10: arrayArin10,
        arrayArin11: arrayArin11,
        arrayArin12: arrayArin12,
        arrayArin13: arrayArin13,
        arrayArin14: arrayArin14,
        arrayArin15: arrayArin15,
        arrayArin16: arrayArin16,
        arrayArin17: arrayArin17,
        arrayArin18: arrayArin18,
        arrayArinTotal: arrayArinTotal,
        arrayJason1: arrayJason1,
        arrayJason2: arrayJason2,
        arrayJason3: arrayJason3,
        arrayJason4: arrayJason4,
        arrayJason5: arrayJason5,
        arrayJason6: arrayJason6,
        arrayJason7: arrayJason7,
        arrayJason8: arrayJason8,
        arrayJason9: arrayJason9,
        arrayJason10: arrayJason10,
        arrayJason11: arrayJason11,
        arrayJason12: arrayJason12,
        arrayJason13: arrayJason13,
        arrayJason14: arrayJason14,
        arrayJason15: arrayJason15,
        arrayJason16: arrayJason16,
        arrayJason17: arrayJason17,
        arrayJason18: arrayJason18,
        arrayJasonTotal: arrayJasonTotal,
        arrayPar1: arrayPar1,
        arrayPar2: arrayPar2,
        arrayPar3: arrayPar3,
        arrayPar4: arrayPar4,
        arrayPar5: arrayPar5,
        arrayPar6: arrayPar6,
        arrayPar7: arrayPar7,
        arrayPar8: arrayPar8,
        arrayPar9: arrayPar9,
        arrayPar10: arrayPar10,
        arrayPar11: arrayPar11,
        arrayPar12: arrayPar12,
        arrayPar13: arrayPar13,
        arrayPar14: arrayPar14,
        arrayPar15: arrayPar15,
        arrayPar16: arrayPar16,
        arrayPar17: arrayPar17,
        arrayPar18: arrayPar18,
        arrayParTotal: arrayParTotal,
      ) // end newCourses variable list

    
  )

);

这是我的 newCourses.ejs 页面的 sn-p

<!-- course dates -->
<div class="date mx-auto" style="width: 200px;">

<p>

<% for(var i=0; i<numberOfEntries; i++) %>


  <button class="btn btn-dark" type="button" name="button" value="<%= arrayCourseDate[i] %>" data-toggle="collapse" data-target="#collapseScoreCardDate" aria-expanded="false" aria-controls="collapseScoreCardDate">
      <%= arrayCourseDate[i] %>

   </button>
<%  %>

</p>
<!-- end course dates -->
<div class="collapse" id="collapseScoreCardDate">
  <!-- The scorecard -->
  <% for(var i=0; i<numberOfEntries; i++) %>
      <div class="buttoncard shadow-lg rounded">
 <!-- what i need is to take the date and then do a new find for that specific date. -->
 <table class="table table-secondary text-dark table-striped">

   <% for(var i=0; i<numberOfEntries; i++) %>
   <thead>
     <tr>
       <th scope="col">walk/ride</th>
       <th scope="col"> Color </th>
       <th scope="col">Hole</th>
       <th>1</th>
       <th>2</th>
       <th>3</th>
       <th>4</th>
       <th>5</th>
       <th>6</th>
       <th>7</th>
       <th>8</th>
       <th>9</th>
       <th>10</th>
       <th>11</th>
       <th>12</th>
       <th>13</th>
       <th>14</th>
       <th>15</th>
       <th>16</th>
       <th>17</th>
       <th>18</th>
       <th class=table-light scope="col">Total</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><%=arrayWalkRide[i]%> </td>
       <td><%=arrayArinColor[i]%> </td>
       <th scope="row">Arin</th>
       <td><%=arrayArin1[i]%></td>
       <td><%=arrayArin2[i]%></td>
       <td><%=arrayArin3[i]%></td>
       <td><%=arrayArin4[i]%></td>
       <td><%=arrayArin5[i]%></td>
       <td><%=arrayArin6[i]%></td>
       <td><%=arrayArin7[i]%></td>
       <td><%=arrayArin8[i]%></td>
       <td><%=arrayArin9[i]%></td>
       <td><%=arrayArin10[i]%></td>
       <td><%=arrayArin11[i]%></td>
       <td><%=arrayArin12[i]%></td>
       <td><%=arrayArin13[i]%></td>
       <td><%=arrayArin14[i]%></td>
       <td><%=arrayArin15[i]%></td>
       <td><%=arrayArin16[i]%></td>
       <td><%=arrayArin17[i]%></td>
       <td><%=arrayArin18[i]%></td>
       <td class=table-light><%=arrayArinTotal[i]%></td>
     </tr>
     <tr>

       <th scope="row">paired</th>
       <td> <%=arrayJasonColor[i]%></td>
       <th scope="row">Jason</th>
       <td><%=arrayJason1[i]%></td>
       <td><%=arrayJason2[i]%></td>
       <td><%=arrayJason3[i]%></td>
       <td><%=arrayJason4[i]%></td>
       <td><%=arrayJason5[i]%></td>
       <td><%=arrayJason6[i]%></td>
       <td><%=arrayJason7[i]%></td>
       <td><%=arrayJason8[i]%></td>
       <td><%=arrayJason9[i]%></td>
       <td><%=arrayJason10[i]%></td>
       <td><%=arrayJason11[i]%></td>
       <td><%=arrayJason12[i]%></td>
       <td><%=arrayJason13[i]%></td>
       <td><%=arrayJason14[i]%></td>
       <td><%=arrayJason15[i]%></td>
       <td><%=arrayJason16[i]%></td>
       <td><%=arrayJason17[i]%></td>
       <td><%=arrayJason18[i]%></td>
       <td class=table-light><%=arrayJasonTotal[i]%></td>
     </tr>

     <tr class="table-success">
       <td><%=arrayPaired[i]%></td>
       <th scope="row"> </th>
       <th scope="row">Par</th>
       <td><%=arrayPar1[i]%></td>
       <td><%=arrayPar2[i]%></td>
       <td><%=arrayPar3[i]%></td>
       <td><%=arrayPar4[i]%></td>
       <td><%=arrayPar5[i]%></td>
       <td><%=arrayPar6[i]%></td>
       <td><%=arrayPar7[i]%></td>
       <td><%=arrayPar8[i]%></td>
       <td><%=arrayPar9[i]%></td>
       <td><%=arrayPar10[i]%></td>
       <td><%=arrayPar11[i]%></td>
       <td><%=arrayPar12[i]%></td>
       <td><%=arrayPar13[i]%></td>
       <td><%=arrayPar14[i]%></td>
       <td><%=arrayPar15[i]%></td>
       <td><%=arrayPar16[i]%></td>
       <td><%=arrayPar17[i]%></td>
       <td><%=arrayPar18[i]%></td>
       <td class=table-light><%=arrayParTotal[i]%></td>
     </tr>
   </tbody>
   <%  %>
 </table>

      </div>
      <!--  end of scorecard -->
      <%  %>
</div>
</div>

我想让它工作的方法是让 mongoose 运行查询以获取日期，然后，一旦单击，就有另一个特定于该日期的 mongoose 查询，因此不需要 for each 中的所有数组和变量环形。我只是不知道如何让 app.js 页面从 .ejs 页面读取值。

【参考方案1】：

在您想要指定特定日期的 .ejs 页面中单击的链接应将该日期作为查询参数添加到链接中。因此，您可以构建一个链接，例如 /courses?date=xxxx，并为您想要的特定日期设置查询参数（xxxx 将是您想要的日期，采用您选择的格式），而不是仅仅链接到 /courses。

然后，您的 Express 路由处理程序可以检查 req.query.date，如果它有一个有意义的值，那么您只修改该日期的查询。

所以，在你的路线内：

app.get("/courses", function(req, res) 
    if (req.query.date) 
         // run query for a specific date only
     else 
         // query for all dates
    
    .....
);

查询参数是一种将参数传递给链接以修改链接目标的简单方法，而无需仅为该参数集创建新路由。如果您查看 Google 搜索链接，您会在搜索后看到查询参数中有很多内容，因为它们正在做同样的事情。

【讨论】：

非常感谢您的洞察力和快速回复。我必须做我的研究来建立它。我看到并感谢 app.js 方面的建议。我将不得不看看如何在 ejs 端构建它以添加查询参数。

@JasonG - 如果这回答了您的问题，那么您可以通过单击答案左侧的复选标记在此处向社区表明这一点。这也将为您在***上赢得一些声誉点，因为她遵循正确的程序。