从快递到jade客户端javascript传递数组

Question

I have this jade template:

html
  head
    script(type="text/javascript" src="https://www.google.com/jsapi")
    script(type='text/javascript')
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Date', 'Tin_A' ],

       - each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

      ]);
      var options = {
      title: 'bla'
      };
      var chart = new google.visualization.LineChart(document.getElementById('chart_line'));
      chart.draw(data, options);
      }


  body
    h1= title
    #chart_line

and I'm using this call to render the jade template in express/node.js:

app.get('/', function(req, res){
  sensors.findSensorAllData(2, 2, function (error,emps){
        console.log(emps);
        res.render('tmp', {
            title : 'Temperatures in a row',
            myData : emps
        });
    });
});

the output of the console.log(emps) is:

[ { _id: 524b8642028e167fb0e3661d,
    sensor_id: 2,
    value: 49,
    date: Tue Oct 01 2013 20:34:40 GMT-0600 (CST) },
  { _id: 524b863d028e167fb0e3661c,
    sensor_id: 2,
    value: 19,
    date: Tue Oct 01 2013 20:34:35 GMT-0600 (CST) } ]

after the rendering occour, I expect to have the values within the javascrip in the jade template... but It won't work. I get only the same lines in plain text, as if the line - each datapoing in myData would have no meaning... what am I doing wrong? Thanks

--- Edit: Everything works fine if I replace the lines

- each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

with

  ['2004',  20],
  ['2005',  30],
  ['2006',  40]

Answer 1

I think you may be accidentally injecting a String instead of an Array because of the quotes around the brackets:

- each datapoint in myData
        "[" + datapoint.date + "," + datapoint.value + "],"

I'm not very familiar with Jade, but I think you may want to do the following instead:

- each datapoint in myData
        [#{datapoint.date}, #{datapoint.value}],

Also, in the sample data you gave that works, you are only using the year portion of the Date, but the contents of the datapoint.date property may be a full Date object, I'm not sure if that is what you want for this use.

Answer 2

See this question's chosen answer for why what you're trying to do doesn't work. ( JADE + EXPRESS: Iterating over object in inline JS code (client-side)? )

Basically, as soon as you hit the script tag, you're telling the Jade parser to handle things in raw form, and no further processing is done. What you really want to do is redo the script tag for your code like follows:

- if (typeof(pins) != "object")
!= "<script type='text/javascript'>"
!=   "google.load('visualization', '1', {packages:['corechart']});
!=   "google.setOnLoadCallback(drawChart);
!=   "function drawChart() {
!=   "var data = google.visualization.arrayToDataTable([
!=   "['Date', 'Tin_A' ],"
- forEach datapoint in myData
  !=   "[" + datapoint.date + "," + datapoint.value + "],"

!=   "]);"
!=   "var options = {"
!=   "title: 'bla'"
!=   "};"
!=   "var chart = new google.visualization.LineChart(document.getElementById('chart_line'));"
!=   "chart.draw(data, options);"
!=   "}"

Try this, but I'm fairly certain it should work.

PS: The link above also (I believe) clearly states why the previous answer should be incorrect, as you can't have that kind of template placeholder interpolation inside of Jade script tags.

Answer 3

Ugly alert:

script
  ...
  var data = google.visualization.arrayToDataTable(['Date', 'Tin_A' ].concat(!{JSON.stringify(myData.map(function(i) { return [ i.date, i.value ] })) }));