我正在使用帕格,我想将一个变量传递给前端以获取信息,但是当我尝试这样做时,它会像文本一样传递。
我就是这样做的。
控制器代码:
res.render('view/edit', {
title: 'Title',
sub:true,
data: variableObject
});
这是渲染视图中的代码:
script(type='text/javascript').
var x = "#{data}"
console.log(x);
这是日志的结果
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
我无法访问该对象因为是文本,有没有办法像对象一样传递对象?
答案 0 :(得分:9)
首先使用<html>
<head>
<title>Periodic Table</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style></style>
</head>
<body>
<h1>Periodic Table</h1>
<center>
<table width="1050px" height="500px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td bgcolor="#339933"><a href="www.google.com">H</a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="#7e51a1">He</td>
</tr>
<tr>
<td bgcolor="#f09609">Li</td>
<td bgcolor="#996600">Be</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="#16aba8">B</td>
<td bgcolor="#339933">C</td>
<td bgcolor="#339933">N</td>
<td bgcolor="#339933">O</td>
<td bgcolor="#8ac03f">F</td>
<td bgcolor="#7e51a1">Ne</td>
</tr>
<tr>
<td bgcolor="#f09609">Na</td>
<td bgcolor="#996600">Mg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="#219fd9">Al</td>
<td bgcolor="#16aba8">Si</td>
<td bgcolor="#339933">P</td>
<td bgcolor="#339933">S</td>
<td bgcolor="#8ac03f">Cl</td>
<td bgcolor="#7e51a1">Ar</td>
</tr>
<tr>
<td bgcolor="#f09609">K</td>
<td bgcolor="#996600">Ca</td>
<td bgcolor="#df72ac">Sc</td>
<td bgcolor="#df72ac">Ti</td>
<td bgcolor="#df72ac">V</td>
<td bgcolor="#df72ac">Cr</td>
<td bgcolor="#df72ac">Mn</td>
<td bgcolor="#df72ac">Fe</td>
<td bgcolor="#df72ac">Co</td>
<td bgcolor="#df72ac">Ni</td>
<td bgcolor="#df72ac">Cu</td>
<td bgcolor="#df72ac">Zn</td>
<td bgcolor="#219fd9">Ga</td>
<td bgcolor="#16aba8">Ge</td>
<td bgcolor="#16aba8">As</td>
<td bgcolor="#339933">Se</td>
<td bgcolor="#8ac03f">Br</td>
<td bgcolor="#7e51a1">Kr</td>
</tr>
<tr>
<td bgcolor="#f09609">Rb</td>
<td bgcolor="#996600">Sr</td>
<td bgcolor="#df72ac">Y</td>
<td bgcolor="#df72ac">Zr</td>
<td bgcolor="#df72ac">Nb</td>
<td bgcolor="#df72ac">Mo</td>
<td bgcolor="#df72ac">Tc</td>
<td bgcolor="#df72ac">Ru</td>
<td bgcolor="#df72ac">Rh</td>
<td bgcolor="#df72ac">Pd</td>
<td bgcolor="#df72ac">Ag</td>
<td bgcolor="#df72ac">Cd</td>
<td bgcolor="#219fd9">In</td>
<td bgcolor="#219fd9">Sn</td>
<td bgcolor="#16aba8">Sb</td>
<td bgcolor="#16aba8">Te</td>
<td bgcolor="#8ac03f">I</td>
<td bgcolor="#7e51a1">Xe</td>
</tr>
<tr>
<td bgcolor="#f09609">Cs</td>
<td bgcolor="#996600">Ba</td>
<td bgcolor="#ed1790">*</td>
<td bgcolor="#df72ac">Hf</td>
<td bgcolor="#df72ac">Ta</td>
<td bgcolor="#df72ac">W</td>
<td bgcolor="#df72ac">Re</td>
<td bgcolor="#df72ac">Os</td>
<td bgcolor="#df72ac">Ir</td>
<td bgcolor="#df72ac">Pt</td>
<td bgcolor="#df72ac">Au</td>
<td bgcolor="#df72ac">Hg</td>
<td bgcolor="#219fd9">Tl</td>
<td bgcolor="#219fd9">Pb</td>
<td bgcolor="#219fd9">Bi</td>
<td bgcolor="#16aba8">Po</td>
<td bgcolor="#8ac03f">At</td>
<td bgcolor="#7e51a1">Rn</td>
</tr>
<tr>
<td bgcolor="#f09609">Fr</td>
<td bgcolor="#996600">Ra</td>
<td bgcolor="#e51e25">**</td>
<td bgcolor="#df72ac">Rf</td>
<td bgcolor="#df72ac">Db</td>
<td bgcolor="#df72ac">Sg</td>
<td bgcolor="#df72ac">Bh</td>
<td bgcolor="#df72ac">Hs</td>
<td bgcolor="#df72ac">Mt</td>
<td bgcolor="#df72ac">Ds</td>
<td bgcolor="#df72ac">Rg</td>
<td bgcolor="#df72ac">Cn</td>
<td bgcolor="#767676">Nh</td>
<td bgcolor="219fd9">Fl</td>
<td bgcolor="#767676">Mc</td>
<td bgcolor="#767676">Lv</td>
<td bgcolor="#767676">Ts</td>
<td bgcolor="#767676">Og</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td>*</td>
<td bgcolor="#ed1790">La</td>
<td bgcolor="#ed1790">Ce</td>
<td bgcolor="#ed1790">Pr</td>
<td bgcolor="#ed1790">Nd</td>
<td bgcolor="#ed1790">Pm</td>
<td bgcolor="#ed1790">Sm</td>
<td bgcolor="#ed1790">Eu</td>
<td bgcolor="#ed1790">Gd</td>
<td bgcolor="#ed1790">Tb</td>
<td bgcolor="#ed1790">Dy</td>
<td bgcolor="#ed1790">Ho</td>
<td bgcolor="#ed1790">Er</td>
<td bgcolor="#ed1790">Tm</td>
<td bgcolor="#ed1790">Yb</td>
<td bgcolor="#ed1790">Lu</td>
</tr>
<tr>
<td></td>
<td>**</td>
<td bgcolor="#e51e25">Ac</td>
<td bgcolor="#e51e25">Th</td>
<td bgcolor="#e51e25">Pa</td>
<td bgcolor="#e51e25">U</td>
<td bgcolor="#e51e25">Np</td>
<td bgcolor="#e51e25">Pu</td>
<td bgcolor="#e51e25">Am</td>
<td bgcolor="#e51e25">Cm</td>
<td bgcolor="#e51e25">Bk</td>
<td bgcolor="#e51e25">Cf</td>
<td bgcolor="#e51e25">Es</td>
<td bgcolor="#e51e25">Fm</td>
<td bgcolor="#e51e25">Md</td>
<td bgcolor="#e51e25">No</td>
<td bgcolor="#e51e25">Lr</td>
</tr>
</table>
<img src="assets/table.png" alt="Mountain View">
</center>
</body>
</html>
字符串化您的对象:
JSON.stringify
然后使用String Interpolation, Unescaped res.render('view/edit', {
title: 'Title',
sub: true,
data: JSON.stringify(variableObject)
});
!{data}
<小时/> 或者只是在模板中执行一次:
script(type='text/javascript').
var x = !{data}
console.log(x);
(感谢@Matt,谢谢)
答案 1 :(得分:2)
在这种情况下,我使用了这个:
var x = "#{ JSON.stringify(y) }"
console.log( JSON.parse(x.replace(/"/g,'"')) );
我不确定这是不是最佳做法。