如何将对象从哈巴狗传递到前端javascript

时间:2017-01-31 21:45:08

标签: javascript node.js pugjs

我正在使用帕格,我想将一个变量传递给前端以获取信息,但是当我尝试这样做时,它会像文本一样传递。

我就是这样做的。

控制器代码:

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]

我无法访问该对象因为是文本,有没有办法像对象一样传递对象?

2 个答案:

答案 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(/&quot;/g,'"')) );

我不确定这是不是最佳做法。